即使在为Container GridView指定了高度之后,我的代码也会生成方形小部件.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              height: 250.0,
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(fontSize: 50.0,color: Colors.white),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

上述代码的输出如左侧所示.如何才能获得右侧所示的带有自定义高度小部件的GridView?

outputRequired Output

推荐答案

关键是childAspectRatio.该值用于确定GridView中的布局.为了获得所需的相位,必须将其设置为(itemWidth/itemHeight).解决办法是:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(
                    fontSize: 50.0,
                    color: Colors.white,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

Flutter相关问答推荐

在Flutter中为不受约束的小部件制作动画

如何在Flutter的easy_translation包中链接嵌套的链接翻译?

来自FutureProvider的数据只打印两个不同的变量,它们对一个实例只有一次相同的值,为什么?

Flutter 动画列表一次构建所有项目,而不是仅构建可见的项目

如何在扩展其他小部件时访问Ref

Flutter 翼future 建造者不断开火和重建.它在每次重建时都会生成一个新的随机数--我如何防止这种情况?

为什么Spotify Auth API返回400,而";code_verier不正确?

有没有方法可以从当前时间轻松计算TimeStamp?

按一下按钮即可更新 fl_chart

Flutter CarouselSlider中如何防止右图与放大的中心图重叠?

要禁用按钮上的通知声音,请点击Flutter

在我使用 flutter_riverpod stateprovider 重新保存代码之前,UI 主题状态不会更新

ListView 后台可见

Agora VideoCall 不显示远程视频网格

如何在 flutter 中使用 tabbar 作为底部导航栏?

在 Flame Forge2d 中射击子弹

如何在屏幕按钮中排列 row() (我想在按钮中放置屏幕导航图标)

NoSuchMethodError:方法 '[]' 在 null 上被调用.我的信息流中的错误

无法列出 com.facebook.android:facebook-login -Facebook 登录问题的版本

我们什么时候在flutter中初始化一个provider?