【自学Flutter】10 Wrap布局和 Chip标签组件的使用

最新推荐文章于 2025-07-22 12:27:51 发布

原创最新推荐文章于 2025-07-22 12:27:51 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文详细介绍并展示了在Flutter框架中使用Wrap布局和Chip标签组件的方法。通过具体代码实例，阐述了如何设置组件属性，如间距、对齐方式及内容等，实现美观且功能丰富的界面设计。

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"),
                  ),
                )
              ],
            ),
          )
        )
    );
  }
}