flutter GridView组件以及动态GridView 布局

最新推荐文章于 2023-11-07 10:14:10 发布

原创最新推荐文章于 2023-11-07 10:14:10 发布 · 978 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

本文深入探讨了Flutter中GridView布局的使用方法，包括基础布局设定、动态数据填充及渲染技巧。通过具体实例，展示了如何调整子Widget的数量、间距、比例，并实现网络图片加载，适合Flutter开发者学习。

基础布局

class LayoutDemo extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {    
    return GridView.count(
		//一行的 Widget 数量
        crossAxisCount: 2,  
        children: <Widget>[
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本')
        ],
    );
  }
}

动态数据

class LayoutDemo extends StatelessWidget {  


  List<Widget> _getListData() {
      List<Widget> list = new List();

      for (var i = 0; i < 20; i++) {
        list.add(Container(
          alignment: Alignment.center,
          child: Text(
            '这是第$i条数据',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          color: Colors.blue,        
          // height: 400,  //设置高度没有反应
        ));
      }
      return list;
  }


  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:20.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 20.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}

动态数据的渲染

class LayoutDemo extends StatelessWidget {  


  List<Widget> _getListData() {
      var tempList=listData.map((value){
          return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(value['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    value['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20
                    ),
                  )
                ],

            ),
            decoration: BoxDecoration(

              border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            ),
              
            // height: 400,  //设置高度没有反应
          );

      });
      // ('xxx','xxx')
      return tempList.toList();
  }


  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        // childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}