如何使用Flutter製作可滾動的包裝視圖？

Question

我想要顯示有限數量的項目並在用戶向任一方向滾動時進行換行。我該怎麼做呢？

Answer 1

你不能輕易解決這個無限長ListView.builder，因爲它只在一個方向。如果要在兩個方向上進行換行，則可以模擬兩個視口沿相反方向的Stack的雙向換行。

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new HomePage(), 
)); 
} 

class HomePage extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('Wrapping List View'), 
    ), 
     body: new WrappingListView.builder(
     itemCount: 10, 
     itemBuilder: (BuildContext context, int index) { 
      return new Card(
      child: new Container(
       height: 50.0, 
       color: Colors.blue.withOpacity(index/10), 
       child: new Center(
       child: new Text('Card $index') 
      ), 
      ), 
     ); 
     }, 
    ), 
    ); 
    } 
} 

class WrappingListView extends StatefulWidget { 

    factory WrappingListView({ Key key, List<Widget> children }) { 
    return new WrappingListView.builder(
     itemCount: children.length, 
     itemBuilder: (BuildContext context, int index) { 
     return children[index % children.length]; 
     }, 
    ); 
    } 

    WrappingListView.builder({ Key key, this.itemBuilder, this.itemCount }) 
    : super(key: key); 

    final int itemCount; 
    final IndexedWidgetBuilder itemBuilder; 

    WrappingListViewState createState() => new WrappingListViewState(); 
} 

class UnboundedScrollPosition extends ScrollPositionWithSingleContext { 
    UnboundedScrollPosition({ 
    ScrollPhysics physics, 
    ScrollContext context, 
    ScrollPosition oldPosition, 
    }) : super(physics: physics, context: context, oldPosition: oldPosition); 

    @override 
    double get minScrollExtent => double.NEGATIVE_INFINITY; 
} 

class UnboundedScrollController extends ScrollController { 
    @override 
    UnboundedScrollPosition createScrollPosition(
    ScrollPhysics physics, 
    ScrollContext context, 
    ScrollPosition oldPosition, 
) { 
    return new UnboundedScrollPosition(
     physics: physics, 
     context: context, 
     oldPosition: oldPosition, 
    ); 
    } 
} 

class WrappingListViewState extends State<WrappingListView> { 
    UnboundedScrollController _controller = new UnboundedScrollController(); 
    UnboundedScrollController _negativeController = new UnboundedScrollController(); 

    @override 
    void initState() { 
    _controller.addListener(() { 
     _negativeController.jumpTo(
     -_negativeController.position.extentInside - 
     _controller.position.pixels, 
    ); 
    }); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Stack(
     children: <Widget>[ 
     new CustomScrollView(
      physics: new AlwaysScrollableScrollPhysics(), 
      controller: _negativeController, 
      reverse: true, 
      slivers: <Widget>[ 
      new SliverList(
       delegate: new SliverChildBuilderDelegate(
       (BuildContext context, int index) { 
        return widget.itemBuilder(
        context, 
        (widget.itemCount - 1 - index) % widget.itemCount, 
       ); 
       } 
      ), 
      ), 
      ], 
     ), 
     new ListView.builder(
      controller: _controller, 
      itemBuilder: (BuildContext context, int index) { 
      return widget.itemBuilder(context, index % widget.itemCount); 
      }, 
     ), 
     ], 
    ); 
    } 
}