美文网首页Flutter
Flutter 自动换行的标签 Chip

Flutter 自动换行的标签 Chip

作者: 王俏 | 来源:发表于2019-10-10 10:47 被阅读0次

    实现代码:

    import 'package:flutter/material.dart';
    
    class ChipDemo extends StatefulWidget {
      @override
      _ChipDemoState createState() => _ChipDemoState();
    }
    
    class _ChipDemoState extends State<ChipDemo> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ChipDemo'),
            elevation: 0.0,
          ),
           body: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Wrap(//自动换行
                   spacing: 8.0, //一行中两个chip的间距,当不设置时,自动调整间隔
                  runSpacing: 8.0, //两行之间的间距
                  children: <Widget>[
                    Chip(
                      label: Text('Life')
                      ),
    
                      Chip(
                      label: Text('Sunset'),
                      backgroundColor: Colors.orange,
                      ),
    
                      Chip(
                      label: Text('Wanghao'),
                      avatar: CircleAvatar(
                        backgroundColor:Colors.grey,
                        child:Text('皓'),
                        ),
                      ),
                      
                      Chip(
                      label: Text('Wanghao'),
                      avatar: CircleAvatar(
                        backgroundImage:NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
                        
                        ),
                      ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }
    
    

    效果如下:

    chip1.png

    Divider分割线

     Divider(
                        color: Colors.grey,
                        height: 32.0,
                        // indent: 32.0,//左缩进
                      ),
                      
    

    带删除的chip

    List<String> _tags = ['Apple', 'Banana', 'Lemon'];
    
    Wrap(
                      spacing: 8.0,
                      children: _tags.map(
                        (tag) {
                          return Chip(
                            label: Text(tag),
                            onDeleted: () {
                              setState(() {
                                _tags.remove(tag);
                              });
                            },
                          );
                        },
                      ).toList(),
                    ),
                    
    

    带动作的ActionChip

     List<String> _tags = ['Apple', 'Banana', 'Lemon'];
      String _action = 'Nothing';
    
    Container(
                  width: double.infinity,
                  child: Text('ActionChip $_action'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) {
                      return ActionChip(
                        label: Text(tag),
                        onPressed: () {
                          setState(() {
                            _action = tag;
                          });
                        },
                      );
                    },
                  ).toList(),
                ),
    

    过滤碎片FilterChip

    List<String> _selected = [];
    
     Container(
                  width: double.infinity,
                  child: Text('FilterChip ${_selected.toString()}'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) {
                      return FilterChip(
                        label: Text(tag),
                        selected: _selected.contains(tag),
                        onSelected: (value) {
                          setState(() {
                            if (_selected.contains(tag)) {
                              _selected.remove(tag);
                            } else {
                              _selected.add(tag);
                            }
                          });
                        },
                      );
                    },
                  ).toList(),
                ),
    

    单选ChoiceChip

    String _choice = 'Lemon';
    
    
    Container(
                  width: double.infinity,
                  child: Text('ChoiceChip ${_selected.toString()}'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) {
                      return ChoiceChip(
                        label: Text(tag),
                        selectedColor: Colors.black,
                        selected: _choice == tag,
                        onSelected: (value) {
                          setState(() {
                            _choice = tag;
                          });
                        },
                      );
                    },
                  ).toList(),
                ),
    

    相关文章

      网友评论

        本文标题:Flutter 自动换行的标签 Chip

        本文链接:https://www.haomeiwen.com/subject/cprdyctx.html