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

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Layout and Chip Example'),
      ),
      body: Wrap(
        spacing: 8.0, // 主轴方向上的间距
        runSpacing: 4.0, // 交叉轴方向上的间距
        children: <Widget>[
          Chip(
            label: Text('Chip 1'),
            backgroundColor: Colors.lightBlue,
          ),
          Chip(
            label: Text('Chip 2'),
            backgroundColor: Colors.green,
          ),
          Chip(
            label: Text('Chip 3'),
            backgroundColor: Colors.orange,
          ),
          // ...更多的Chip组件
        ],
      ),
    );
  }
}

这段代码创建了一个简单的应用，其中包含了Wrap布局和Chip标签组件的使用。Wrap可以让其子Widget按照主轴方向排列并在不足以放下更多Widget时自动换行。Chip组件用于创建一个小巧但包含关键信息的窗口小部件，可以通过backgroundColor属性设置背景颜色。