GridView

//网格-collectionview
class MyGridView extends StatelessWidget {
const MyGridView({super.key});

List<Widget> _initGridViewData() {
//for循环加载视图
List<Widget> tempList = [];
for (var i = 0; i < 12; i++) {
tempList.add(
Container(
alignment: .center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black26),
),
child: Column(
children: [
Image.network(
"https://gips3.baidu.com/it/u=3476243082,1256047914&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048",
),
const SizedBox(height: 10),
Text(
"da22222ta",
style: TextStyle(fontSize: 18, color: Colors.red),
),
],
),
),
);
}
return tempList;
}

Widget initListDataForSingle(context,index){
return Container(
alignment: .center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black26),
),
child: Column(
children: [
Image.network(
"https://gips3.baidu.com/it/u=3476243082,1256047914&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048",
),
const SizedBox(height: 10),
Text(
"da22222ta",
style: TextStyle(fontSize: 18, color: Colors.red),
),
],
),
);

}
@override
Widget build(BuildContext context) {
// TODO: implement build
// return GridView.count(
// crossAxisCount: 3,//一行展示几个item
// children: [
// Icon(Icons.eighteen_mp_sharp),
// Icon(Icons.radar_sharp),
// Icon(Icons.e_mobiledata),
// ],);

//    return GridView.extent(
//      maxCrossAxisExtent: 50,//横轴子元素的最大长度
//      children: [
//        Icon(Icons.eighteen_mp_sharp),
//        Icon(Icons.radar_sharp),
//        Icon(Icons.e_mobiledata),
//    ],);

// return GridView.count(
//   // maxCrossAxisExtent: 122,//横轴子元素固定最大长度-GridView.extent适用
//   crossAxisCount: 2, //一行展示数量-GridView.count样式适用
//   crossAxisSpacing: 10, //水平item间距
//   mainAxisSpacing: 10, //垂直item间距
//   padding: EdgeInsets.all(10),
//   childAspectRatio: 0.8, //宽高比
//   children: _initGridViewData(),
// );

return GridView.builder(
  itemCount: 12,//当前样式显示数量
  padding: EdgeInsets.all(10),
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    // crossAxisCount: 3,
    maxCrossAxisExtent: 130,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 0.7,
  ),
  itemBuilder: initListDataForSingle,
);

}
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容