Flutter中可滚动的主屏幕

Question

不知道为什么不能用。也许有人可以帮助我，我认为这只是一个小错误。我希望能够滚动整个屏幕。容器中的 "公司卡 "小部件可以垂直滚动。

return Column(
      children: <Widget>[
        SearchBox(),
        Expanded(
          child: Stack(
            children: <Widget>[
              Container(
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: companies.length,
                  itemBuilder: (context, index) => CompanyCard(),
                ),
              ),
            ],
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

横向: Facebook, Google Twitter (已行)纵向：整个屏幕(不灵)

Answer 1

将SingleChildScrollView包裹到你喜欢滚动的widget上。

    return Column(
      children: <Widget>[
        SearchBox(),
        SingleChildScrollView(
          child: Expanded(
            child: Stack(
              children: <Widget>[
                Container(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: companies.length,
                    itemBuilder: (context, index) => CompanyCard(),
                  ),
                ),
              ],
            ),
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

新编辑:要使整个页面可以滚动，用SingleChildScrollView包装页面。

全代码。

 return Container(
              child: SingleChildScrollView(
                child: Expanded(
                  child: Column(
                    children: <Widget>[
                      SearchBox(),
                      SingleChildScrollView(
                        child: Expanded(
                          child: Stack(
                            children: <Widget>[
                              Container(
                                child: ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: companies.length,
                                  itemBuilder: (context, index) =>
                                      CompanyCard(),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      SearchBox(),
                      SearchBox(),
                      SearchBox(),
                    ],
                  ),
                ),
              ),
            );

Answer 2

你需要给你的List View指定一个明确的高度。默认情况下，一个List View的高度宽度是无限的。

为了能够滚动整个屏幕，你需要将你的根部件包裹在SingleChildScrollView中，然后为List View容器指定一个高度。有点像这样:-

body : SingleChildScrollView(child :... 
 ... Other widgets... 
  Container (
    height :200,
    width :MediaQuery.of(context).size.width, // so that ListView occupies the entire width
child : ListView.builder(...

Answer 3

我认为Column中的ListView需要高度，我用Container包装了ListView，并给出了一些高度。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Home page"),
        elevation: 5.0,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              SizedBox(child: Text('asdf')),
              Container(
                height: 500,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 3,
                  itemBuilder: (context, index) =>
                      SizedBox(width: 200, child: Text('aaa')),
                ),
              ),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
            ],
          ),
        ),
      ),
    );
  }