Flutter RawChip


Flutter RawChip

简介

所有chip widget类型的基础，集合所有功能，我们通常不是直接使用它，而是根据自己需要选择chi， 比如：

  • chip ,一个简单的芯片，只能显示信息，并被删除
  • inputChip,以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本
  • choiceChip,允许从一组选项中进行单一的选择
  • FilterChip,使用标签或描述作为过滤内容的方式

基本用法

  • inputChip可以通过设置进行选择onSelected，通过设置onDeleted可以删除，并且可以通过OnPressed表现按压效果
  • inputChip 有一个前导图标和尾随图标，填充颜色可以订制
  • inputChip 可以和其他UI元素搭配使用，比如：wrap,ListView(scrollDirection为Axis.horizo​​ntal)

实例演示

import 'package:flutter/material.dart';


class FilterChipDemo extends StatefulWidget {
  _FilterChipDemoState createState() => _FilterChipDemoState();
}

class InputEntry{
  final String name;
  final String initials;
  const InputEntry(this.name,this.initials);
}

class _FilterChipDemoState extends State<FilterChipDemo> {

final List<InputEntry> _lists=<InputEntry>[
    const InputEntry('android', 'A'),
    const InputEntry('java', 'J'),
    const InputEntry('php', 'P'),
    const InputEntry('web', 'W'),
];

Iterable<Widget> get _rawChipWidget sync*{
  for(InputEntry value in _lists){
    yield Padding(
      padding: const EdgeInsets.all(4.0),
      child: RawChip(
        avatar: CircleAvatar(
           backgroundColor: Colors.redAccent.shade400,
           child: Text(value.initials),
        ),
        label: Text(value.name),
        onDeleted: (){
          // _inputs.add(value.name);
          setState(() {
                       _lists.remove(value);

                    });

        },

      ),
    );
  }
}

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
         Wrap(
          children: _rawChipWidget.toList(),
        ),

      ],
    );
  }
}