Question

我想创建一个包含多个小部件的可滚动页面，每个小部件代表一个ListView。其中一些列表具有用于加载多个项目的滚动控制器。我希望能够控制每个小部件中的滚动，但我也想在页面上滚动。

类似this的事物：
MainPage（我尝试过Column）：
-Widget1>与scrollDirection分开的ListView .: Axis.horizontal
-Widget2>一个用scrollDirection分隔的ListView：Axis.horizontal
-Widget3>具有scrollDirection的ListView.builder：Axis.vertical;列表中的每个项目都包含一个GridView.builder；此列表具有用于加载多个项目的滚动控制器
-Widget4> idem Widget3（一个带有scrollDirection：Axis.vertical的ListView.builder；此列表还有一个用于加载更多元素的滚动控制器）

主页：

  Column(
   children: <Widget>[
    DocumentsFiltersWidget() //Widget1,
    ReportsListWidget() //Widget2,
    Expanded(child: DocumentsListWidget()) //Widget3,
    Expanded(child: DocumentsListWidget()) //also Widget3
   ]
 )

Widget3

  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() async {
      double maxScroll = _scrollController.position.maxScrollExtent;
      double currentScroll = _scrollController.position.pixels;

      if (currentScroll == maxScroll) { 
        print("loadMore");
      }
    });

    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return 
    ListView.builder(
      controller: _scrollController,
      shrinkWrap: true,
      itemCount: 2,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: EdgeInsets.fromLTRB(12.0, 0.0, 12.0, 0.0),
          child: Column(
            children: <Widget>[
              SizedBox(height: 10.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("List ${index.toString()}"),
              ]),
              Container(
                margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                decoration: new BoxDecoration(
                  border: new Border.all(color: Colors.grey, width: 0.3)
                )
              ),
              GridView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: 10,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, mainAxisSpacing: 5.0, childAspectRatio: 0.75),
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)),
                    child: Padding(
                      padding: EdgeInsets.all(5.0),
                      child: Text("DocumentCard ${index.toString()}")
                    )
                  );
                }
              )
            ],
        ),
      );
    });
  }

一切正常，除了我无法滚动浏览整个页面，Widget1和Widget2卡住了。像this。我认为这是因为Column和Extended窗口小部件，但是如果我用ListView替换Column，则Widget3 _scrollController.addListener不再触发。

Answer 1

有两种解决方法。使用ListView或SingleChildScrollView。

另一种实现相同目的的方法是使用SingleChildScrollView：

return new Container(
  child: new ListView(
    children: <Widget>[
      Column(
      children: <Widget>[
        Child1(),
        Child2(),
        ...
        ChildN()
      ]
    ),
  ],
  )
);

或者：

return new Container(
  child: new SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

让我知道这是否可行，以及您是否有任何疑问。

Flutter：具有多个滚动控制器的多个列表

1 个答案: