Flutter流式组件Wrap

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

  @override
  Widget 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});

  @override
  Widget 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);

  @override
  Widget build(BuildContext context) {
    return const LayoutDemo();
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({super.key});

  @override
  Widget 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});

  @override
  Widget 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),
    );
  }
}