Wrap、Flow 流式布局

Wrap 布局.png

Wrap和Flow均支持流式布局，即超出屏幕显示范围会自动折行的布局。Flow由于比较复杂很少使用，优先考虑其它布局替代。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Wrap、Flow 布局'),
        ),
        body: Wrap(
          spacing: 8.0, // 主轴(水平)方向间距
          runSpacing: 4.0, // 纵轴（垂直）方向间距
          alignment: WrapAlignment.start, //沿主轴方向左对齐
          children: [
            //垂直填充
            const SizedBox(height: 10.0),
            //水平分割
            const Divider(),
            const Chip(
              label: Text("普通的chip"),
              labelStyle: TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            const Chip(
              avatar: Icon(
                Icons.arrow_forward,
                color: Colors.black54,
              ),
              label: Text("带avatar的chip"),
              labelStyle: TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            const Chip(
              avatar: CircleAvatar(
                backgroundImage: AssetImage('assets/images/fox.jpg'),
                radius: 18.0,
              ),
              label: Text("带avatar的chip"),
              labelStyle: TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            const Chip(
              avatar: CircleAvatar(
                backgroundImage: AssetImage('assets/images/fox.jpg'),
                radius: 30.0,
              ),
              //设置内边距填充
              padding: EdgeInsets.all(0.0),
              label: Text("padding为0,labelPadding不为0的chip"),
              labelPadding: EdgeInsets.all(8.0),
              labelStyle: TextStyle(
                color: Colors.white,
                fontSize: 10.0,
                fontWeight: FontWeight.bold,
              ),
              backgroundColor: Colors.blue,
            ),
            Chip(
              label: const Text("带deleteIcon的chip"),
              deleteIcon: const Icon(Icons.close),
              deleteIconColor: Colors.orange,
              onDeleted: () {
                print("点击了删除噢");
              },
              deleteButtonTooltipMessage: "弹出提示",
              labelStyle: const TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            Chip(
              label: const Text("圆角矩形的chip"),
              deleteIcon: const Icon(Icons.close),
              deleteIconColor: Colors.black54,
              onDeleted: () {
                print("点击了删除噢");
              },
              deleteButtonTooltipMessage: "弹出提示",
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
              ),
              labelStyle: const TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            const Chip(
              label: Text("尺寸最小的chip"),
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              labelStyle: TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            const Chip(
              label: Text("带阴影的chip"),
              shadowColor: Colors.grey,
              elevation: 10.0,
              labelStyle: TextStyle(color: Colors.white),
              backgroundColor: Colors.blue,
            ),
            //水平分割
            const Divider(
                //左侧缩进
                indent: 20,
                //右侧缩进
                endIndent: 20,
                //分割线颜色
                color: Colors.red,
                //分割线高度
                height: 20,
                //分割线厚度
                thickness: 12),
          ],
        ));
  }
}