![](https://img.haomeiwen.com/i1443029/e2de276bcbece853.png)
样式
创建网格布局
void main() {
runApp(const MyUIListView());
}
class MyUIListView extends StatelessWidget {
const MyUIListView({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.orange
),
home: Scaffold(
appBar: AppBar(title: const Text('哈哈哈哈哈哈哈哈')),
//body: const MyUIAddListView(),
body: const MyUIGridUIView(),
),
);
}
}
class MyUIGridUIView extends StatelessWidget {
const MyUIGridUIView({super.key});
// This widget is the root of your application.
List<Widget> _initGridViewData() {
List<Widget> templist = [];
for (var i = 0; i < 20; i++) {
templist.add(
Container(
//alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.orange
),
child: Column(
children: [
Image.network('https://img1.baidu.com/it/u=3410057752,323673784&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=692'),
SizedBox(height: 10),
Text('贴贴', style: TextStyle(
fontSize: 18
))
],
),
),
);
}
return templist;
}
@override
Widget build(BuildContext context) {
return GridView.count(
padding: const EdgeInsets.all(10),
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 0.6,
children: _initGridViewData(),
);
}
}
![](https://img.haomeiwen.com/i1443029/cc43fa8540ac2d0d.png)
样式.png
就这样
![](https://img.haomeiwen.com/i1443029/00c2c47f17809654.gif)
二哈泰式按摩.gif
网友评论