Wrap组件类似Row组件都是横向依次排列，唯一的区别就是Wrap能自动换行。

主要代码：

Wrap(spacing: 10, //左右间距runSpacing: 10, //上下间距// direction: Axis.vertical,//主轴的方向，默认横向// alignment: WrapAlignment.spaceBetween, //主轴对齐方式children: [Button("女装", onPressed: () {}),Button("笔记本", onPressed: () {}),Button("玩具", onPressed: () {}),Button("时尚", onPressed: () {}),Button("男装", onPressed: () {}),Button("连衣裙", onPressed: () {}),Button("穿搭", onPressed: () {}),],
),

Wrap中spacing属性调整组件间的左右间距；

runSpacing属性调整每行之间的上下间距；

direction属性为控件排列方向，默认横向排列，设置为Axis.vertical时，组件依次纵向排列，当容器内第一列排列满时自动换行排第二列，依次向下一列排列；

alignment属性为控件之间的对齐方式。

自定义按钮：

//自定义按钮组件
class Button extends StatelessWidget {final String text;final void Function()? onPressed;const Button(this.text, {super.key, required this.onPressed});@overrideWidget build(BuildContext context) {return ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20),),),backgroundColor: MaterialStateProperty.all(CupertinoColors.systemGrey5),foregroundColor: MaterialStateProperty.all(Colors.black),),onPressed: onPressed,child: Text(text),);}
}

 完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: const Text("Flutter"),),body: const MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const LayoutDemo();}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({super.key});@overrideWidget build(BuildContext context) {return ListView(padding: const EdgeInsets.all(10),children: [Row(children: [Text("热搜",style: Theme.of(context).textTheme.titleLarge,),],),const Divider(),Wrap(spacing: 10, //左右间距runSpacing: 10, //上下间距// direction: Axis.vertical,//主轴的方向，默认横向// alignment: WrapAlignment.spaceBetween, //主轴对齐方式children: [Button("女装", onPressed: () {}),Button("笔记本", onPressed: () {}),Button("玩具", onPressed: () {}),Button("时尚", onPressed: () {}),Button("男装", onPressed: () {}),Button("连衣裙", onPressed: () {}),Button("穿搭", onPressed: () {}),],),const SizedBox(height: 10),Row(children: [Text("历史记录",style: Theme.of(context).textTheme.titleLarge,),],),const Divider(),const Column(children: [ListTile(title: Text("女装")),Divider(),ListTile(title: Text("手机")),Divider(),ListTile(title: Text("电脑")),Divider(),],),const SizedBox(height: 40),Padding(padding: const EdgeInsets.all(40),child: OutlinedButton.icon(onPressed: () {},icon: const Icon(Icons.delete,color: Colors.grey,),label: const Text("清空历史",style: TextStyle(color: Colors.grey),),),),],);}
}//自定义按钮组件
class Button extends StatelessWidget {final String text;final void Function()? onPressed;const Button(this.text, {super.key, required this.onPressed});@overrideWidget build(BuildContext context) {return ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20),),),backgroundColor: MaterialStateProperty.all(CupertinoColors.systemGrey5),foregroundColor: MaterialStateProperty.all(Colors.black),),onPressed: onPressed,child: Text(text),);}
}