样式

创建网格布局

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(),
    );
  }
}

样式.png

就这样

二哈泰式按摩.gif