10 Wrap布局和Chip标签组件的使用

1.源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(
            child: Wrap(
              spacing: 20.0,
              runSpacing: 12.0,
              alignment: WrapAlignment.center,
              children: <Widget>[
                Chip(
                  label: Text("动漫"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("D"),
                  ),
                ),
                Chip(
                  label: Text("音乐"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("Y"),
                  ),
                ),
                Chip(
                  label: Text("影视"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("Y"),
                  ),
                ),
                Chip(
                  label: Text("纪录"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("J"),
                  ),
                ),
                Chip(
                  label: Text("课程"),
                  deleteIcon: Icon(Icons.cancel),
                  deleteIconColor: Colors.red,
                  deleteButtonTooltipMessage: "长按删除按钮显示这个信息",
                  onDeleted: (){},
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("K"),
                  ),
                )
              ],
            ),
          )
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(
            //Wrap布局
            child: Wrap(
              //水平方向间距
              spacing: 20.0,
              //垂直方向间距
              runSpacing: 12.0,
              //与主轴(水平方向)的对齐方式
              alignment: WrapAlignment.center,
              children: <Widget>[
                //Chip标签组件
                Chip(
                  //标签文本
                  label: Text("动漫"),
                  //左侧内容(一般为小图标)
                  avatar: CircleAvatar(
                    //左侧内容背景颜色
                    backgroundColor: Colors.green,
                    //内容文本
                    child: Text("D"),
                  ),
                ),
                Chip(
                  label: Text("音乐"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("Y"),
                  ),
                ),
                Chip(
                  label: Text("影视"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("Y"),
                  ),
                ),
                Chip(
                  label: Text("纪录"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("J"),
                  ),
                ),
                Chip(
                  label: Text("课程"),
                  //删除图标
                  deleteIcon: Icon(Icons.cancel),
                  //删除图标背景颜色
                  deleteIconColor: Colors.red,
                  //删除按钮提示信息
                  deleteButtonTooltipMessage: "长按删除按钮显示这个信息",
                  //删除回调
                  onDeleted: (){},
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("K"),
                  ),
                )
              ],
            ),
          )
        )
    );
  }
}

3.效果图