Question

我想将列包裹在listview中，以便当向下滚动时，搜索栏将消失。我这样尝试过

new ListView(
   shrinkWrap: true,
    children: <Widget>[
       new Column(
         mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new GestureDetector(
              child: new Container(
                color: Colors.grey[300],
                child: new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Card(
                    margin: const EdgeInsets.fromLTRB(4.0, 0.0, 4.0, 0.0),
                    child: new ListTile(
                      leading: new Icon(Icons.search),
                      title: new Text('Search',
                          style: new TextStyle(color: Colors.grey[600])),
                    ),
                  ),
                ),
              ),
              onTap: () {
                print(
                    'tapped');
              },
            ),
            new GridView.builder(
              itemCount: items.length,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2),
              itemBuilder: (BuildContext context, int index) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 5.0,
                    child: new Container(
                      decoration: new BoxDecoration(
                        image: new DecorationImage(
                          fit: BoxFit.cover,
                          image: NetworkImage(
                              'https://images.unsplash.com/photo-1533514114760-4389f572ae26?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4ada6181447db788f0fc94d5d2e35c63&auto=format&fit=crop&w=500&q=60'),
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    showDialog(
                      barrierDismissible: false,
                      context: context,
                      child: new AlertDialog(
                        title: new Column(
                          children: <Widget>[
                            new Text("GridView"),
                            new Icon(
                              Icons.favorite,
                              color: Colors.green,
                            ),
                          ],
                        ),
                        content: new Text("Selected Item $index"),
                        actions: <Widget>[
                          new FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: new Text("OK"))
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ],
        ),
    ],
  ),

但是列表视图不可见，控制台显示

垂直视口的高度不受限制。视口在滚动方向以填充其容器。

我尝试插入expanded和shrinkwrap，但仍然不显示任何内容。有人知道如何解决这个问题吗？

Answer 1

您的“搜索字段”窗口小部件不需要一列，只需直接使用即可。从父级ListView中删除shrinkWrap。将shrinkWrap添加到您的GridView中，并指定物理参数：

    new ListView(children: <Widget>[
              new GestureDetector(
                  child: new Container(
                    color: Colors.grey[300],
                    child: new Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: new Card(
                        margin: const EdgeInsets.fromLTRB(4.0, 0.0, 4.0, 0.0),
                        child: new ListTile(
              leading: new Icon(Icons.search),
              title: new Text('Search',
                  style: new TextStyle(color: Colors.grey[600])),
                        ),
                      ),
                    ),
                  ),
                  onTap: () {
                    print('tapped');
                  },
                ),
              GridView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: items.length,
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (BuildContext context, int index) {
                  return new GestureDetector(
                    child: new Card(
                      elevation: 5.0,
                      child: new Container(
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://images.unsplash.com/photo-1533514114760-4389f572ae26?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4ada6181447db788f0fc94d5d2e35c63&auto=format&fit=crop&w=500&q=60'),
                          ),
                        ),
                      ),
                    ),
                    onTap: () {
                      showDialog(
                        barrierDismissible: false,
                        context: context,
                        child: new AlertDialog(
                          title: new Column(
                            children: <Widget>[
                              new Text("GridView"),
                              new Icon(
                                Icons.favorite,
                                color: Colors.green,
                              ),
                            ],
                          ),
                          content: new Text("Selected Item $index"),
                          actions: <Widget>[
                            new FlatButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                child: new Text("OK"))
                          ],
                        ),
                      );
                    },
                  );
                },
              )
            ]
            )

列表视图中的Flutter Wrap小部件

1 个答案: