基于屏幕尺寸的网格高度

Question

嗨，朋友们，我在根据屏幕设置视图的卡片高度时遇到了问题，我尝试过使用下面的代码动态设置屏幕，请找到屏幕，我需要准确的 10 个边距在文本下方，没那么多如果我不使用媒体查询，我会尝试使用动态 MediaQuery，它会给我带来类似屏幕下方额外 space 的错误，而且我也无法使用大小合适的框当我使用 stagged grid view 时请帮助朋友，底部有 space

@override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2.3;
    final double itemWidth = size.width / 2;
    return livevideolist != null
        ? new GridView.builder(
            itemCount: livevideolist == null ? 0 : livevideolist.length,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: (itemWidth / itemHeight),
                crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return new GestureDetector(
                onTap: () {
                  String youtubeid = livevideolist[index]['url'];
                  playYoutubeVideo(youtubeid);
                },
                child: new Card(
                  elevation: 4.0,
                  margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Container(
                        height: 150.0,
                        width: double.infinity,
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            image:
                                new NetworkImage(livevideolist[index]['image']),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Expanded(
                        child: new Container(
                          child: new Text(livevideolist[index]['title']),
                          margin: EdgeInsets.only(left: 10.0, top: 10.0),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        : new Center(
            child: new CircularProgressIndicator(),
          );
  }

Answer 1

你可以为此使用一个包，检查这个很棒的包：https://pub.dartlang.org/packages/flutter_staggered_grid_view

这就是您可以使用的方式：

          Widget build(BuildContext context) {
            return livevideolist != null
                ? new StaggeredGridView.countBuilder(
                    crossAxisCount: 2,
                    itemCount: livevideolist == null ? 0 : livevideolist.length,
                    staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                        onTap: () {},
                        child: new Card(
                          elevation: 4.0,
                          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                          child: new Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              new Container(
                                height: 150.0,
                                width: double.infinity,
                                decoration: new BoxDecoration(
                                  image: new DecorationImage(
                                    image: new NetworkImage(
                                        "https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/ImageFight_arcadeflyer.png/256px-ImageFight_arcadeflyer.png"),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              new Padding(
                                child: new Text(
                                    "Use a very long text here to see how it expands"),
                                padding: EdgeInsets.only(left: 10.0, top: 10.0),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : new Center(child: new CircularProgressIndicator());
          }

只需替换为您正在使用的属性。

根据需要将 maxLines 添加到文本中：

Text("Your long text....",
        maxLines: 2 )

为您的图像使用 fit: BoxFit.cover，而不是 fit: BoxFit.fill

所以看起来你的文字有不同的大小，你可以强制父容器的高度：

new Container(
   height: 80.0, //you can change this value
                            child: new Text(
                                "Use a very long text here to see how it expands"),
                            padding: EdgeInsets.only(left: 10.0, top: 10.0),
                          ),

基于屏幕尺寸的网格高度

Grid height based on the screen size

flutter

flutter-layout

flutter-sliver