Flutter 页面布局 Wrap流式布局 实现电商App搜索页面布局

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Wrap(
      // 方位
      direction:Axis.horizontal,
      // 对齐方式
      alignment:WrapAlignment.start,
      // x轴间距
      spacing: 10.0,
      // Y轴间距
      runSpacing: 10.0,
      children: [
        MyButton(text: "《封神第一部》", pressed: () {}),
        MyButton(text: "变形金刚", pressed: () {}),
        MyButton(text: "暗杀风暴", pressed: () {}),
        MyButton(text: "消失的她", pressed: () {}),
        MyButton(text: "零号追杀", pressed: () {}),
        MyButton(text: "长安三万里", pressed: () {}),
        MyButton(text: "老板娘3", pressed: () {}),
        MyButton(text: "穷兄富弟", pressed: () {}),
        MyButton(text: "暗杀风暴", pressed: () {}),
        MyButton(text: "黄河守墓人", pressed: () {}),
        MyButton(text: "上海滩之风云正道", pressed: () {}),
        MyButton(text: "惊天侠盗团", pressed: () {}),
      ],
    );
  }
}

// 自定义按钮
class MyButton extends StatelessWidget {
  final String text;
  final Function() pressed;
  const MyButton({super.key, required this.text, required this.pressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        style: ButtonStyle(
          elevation: MaterialStateProperty.all(0),
          backgroundColor: MaterialStateProperty.all(Colors.blue),
          foregroundColor: MaterialStateProperty.all(Colors.white),
        ),
        onPressed: pressed,
        child: Text(text));
  }
}