flutter - 如何在 Flutter 中使用带有自定义标签的 ChoiceChip 创建包装

标签 flutter choice android-chips

我在学习 flutter 但有些东西我在任何地方都找不到。

例如,我想制作一个 ChoiceChips群 , 类似于图片

enter image description here

但我不知道怎么放自定义标签 在这种芯片中。

我怎样才能使它成为可能?

 import 'package:flutter/material.dart';

 class MyThreeOptions extends StatefulWidget {
  @override
   _MyThreeOptionsState createState() => _MyThreeOptionsState();
}

  class _MyThreeOptionsState extends State<MyThreeOptions> {
  int _value = 0;

  // ----What I want to appear----//
  /*void v (int index){
   switch (index){
   case 0: Text('Phones');
   break;

   case 1: Text('Computers');
   break;

   case 2: Text('Accessories');
   break;
   }}*/

  @override
  Widget build(BuildContext context) {
  return Wrap(
  alignment: WrapAlignment.center,
  spacing: 12.0,
  children: List<Widget>.generate(
  3,
      (int index) {
      return ChoiceChip(
       pressElevation: 0.0,
       selectedColor: Colors.blue,
       backgroundColor: Colors.grey[100],
       label: Text("item $index"),
       selected: _value == index,
       onSelected: (bool selected) {
        setState(() {
          _value = selected ? index : null;
        });
      },
    );
  },
 ).toList(),
 );}
}

最佳答案

import 'package:flutter/material.dart';
class ChoiceChips extends StatefulWidget {
  final List chipName;
  ChoiceChips({Key key, this.chipName}) : super(key: key);

  @override
  _ChoiceChipsState createState() => _ChoiceChipsState();
}

class _ChoiceChipsState extends State<ChoiceChips> {
  String _isSelected = "";

  _buildChoiceList() {
    List<Widget> choices = List();
    widget.chipName.forEach((item) {
      choices.add(Container(
        child: ChoiceChip(
          label: Text(item),
          labelStyle: TextStyle(color: Colors.white),
          selectedColor: Colors.pinkAccent,
          backgroundColor: Colors.deepPurpleAccent,
          selected: _isSelected == item,
          onSelected: (selected) {
            setState(() {
              _isSelected = item;
            });
          },
        ),
      ));
    });
    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 5.0,
      runSpacing: 3.0,
      children: _buildChoiceList(),
    );
  }
}

关于flutter - 如何在 Flutter 中使用带有自定义标签的 ChoiceChip 创建包装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54493500/

相关文章:

android - 当显示和字体尺寸较大时,手动计算可用宽度不正确

flutter - 如何从“可搜索的下拉列表”中按名称而不是按ID搜索项目?

flutter - 抽屉未定义

使用 SignalR 的 Flutter 推送通知

android - 如何在没有上下文的情况下在应用程序的任何位置显示对话框?

new-operator - 对于有经验的 PHP 开发人员来说,什么是好的 GUI 编程语言?

android - 带有可拖动芯片的芯片组

Symfony2如何渲染复选框?

enumeration - ASN.1 枚举类型和选择类型有什么区别?

Android 芯片 View 不使用 android :textAllCaps ="true" 大写字母