flutter - 使用 Wrap 实现自定义元素大小的网格布局,代替GridView 部件

it2023-02-01  55

使用 Wrap 代替 GridView 实现网格布局, 并且可以实现自定义元素的大小

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( title: Text("首页"), ), backgroundColor: Color(0xfff1f1f1), body: ListView( children: [ Container( height: 200, color: Colors.black12, child: Center(child: Text("顶部")), ), Container( height: 300, margin: EdgeInsets.only(top: 20), width: double.infinity, child: Wrap( children: _createGridViewItem(width), ), ) ], ), ); } _createGridViewItem(width) { List<Widget> list = []; for (var i = 0; i < 18; i++) { // 你想分几列,就除以几, 高度可以进行自定义 list.add(Container( width: width / 4, height: 50, color: Colors.primaries[i], )); } return list; } }
最新回复(0)