Flutter InputChip


简介

输入型chip

  • 以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本

基本用法

  • 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'),
];

List<InputEntry> _inputLists=<InputEntry>[];
Iterable<Widget> get inputWidget sync*{
  for(InputEntry value in _lists){
    _inputLists.add(value);
    yield Padding(
      padding: const EdgeInsets.all(4.0),
      child: InputChip(
        avatar: CircleAvatar(
           backgroundColor: Colors.redAccent.shade400,
           child: Text(value.initials),
        ),
        label: Text(value.name),
        onDeleted: (){
          setState(() {
                      _lists.remove(value);
                    });

        },

      ),
    );
  }
}

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
         Wrap(
          children: inputWidget.toList(),
        ),
      //   InputChip(
      //   label: Text('刷新'),
      //   onSelected: (bool value){

      //   },
      // )
      ],



    );
  }
}