美文网首页
flutter gridView

flutter gridView

作者: CQ_TYL | 来源:发表于2019-02-19 13:57 被阅读0次

class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}
class _homeState extends State<_home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        appBar: new AppBar(
          title: Text("title"),
          centerTitle: true,
        ),
        body: new GridView.count(
//          padding: EdgeInsets.fromLTRB(8.0,0,8.0,0),//上下左右内边距
          mainAxisSpacing: 4.0,//x轴间距
          childAspectRatio: 1.5,//宽高比
          crossAxisSpacing: 4.0,//y轴间距
          crossAxisCount: 3,//行个数
          children: <Widget>[
              new Container(
                color: Colors.deepPurpleAccent,
              ),
              new Container(
                color: Colors.yellow,
              ),
              new Container(
                color: Colors.lightBlue,
              ),
              new Container(
                color: Colors.grey,
              ),
              new Container(
                color: Colors.red,
              ),
              new Container(
                color: Colors.blueGrey,
              ),
          ],
        )
    );
  }
}
效果图
另一种写法:
class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}

class _homeState extends State<_home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        appBar: new AppBar(
          title: Text("title"),
          centerTitle: true,
        ),
        body: new GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 4.0,
            //x轴间距
            childAspectRatio: 1.5,
            //宽高比
            crossAxisSpacing: 4.0,
            //y轴间距
            crossAxisCount: 3,
            //行个数
          ),
          children: <Widget>[
            new Container(
              color: Colors.deepPurpleAccent,
            ),
            new Container(
              color: Colors.yellow,
            ),
            new Container(
              color: Colors.lightBlue,
            ),
            new Container(
              color: Colors.grey,
            ),
            new Container(
              color: Colors.red,
            ),
            new Container(
              color: Colors.blueGrey,
            ),
          ],
        )
        );
  }
效果一样
效果图

相关文章

网友评论

      本文标题:flutter gridView

      本文链接:https://www.haomeiwen.com/subject/bfnxyqtx.html