Question

您好朋友，我在尝试通过使用以下代码动态设置屏幕时，根据我尝试过的屏幕来设置视图的卡片高度时遇到问题，请找到该屏幕，我也需要在屏幕下方精确10个边距文字，不是那么多，如果我不使用媒体查询，我尝试使用动态MediaQuery，这会导致出现类似屏幕下方多余空间的错误，并且我也无法使用大小框，请在使用时帮助朋友标记网格视图的底部有空间

@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),
                          ),

网格高度基于屏幕尺寸

1 个答案: