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

Question

我正在学习颤振，但有些东西我在任何地方都找不到。

比如我想做一组 ChoiceChips，类似于图片

但我不知道如何在这种芯片中放置自定义标签。

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

 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(),
 );}
}

Answer 1

    int defaultChoiceIndex;
List<String> _choicesList = ['All', 'Pending', 'Accepted'];

    @override
  void initState() {
    // TODO: implement initState
    super.initState();
    defaultChoiceIndex = 0;
  }

    Wrap(
      spacing: 8,
      children: List.generate(_choicesList.length, (index) {
        return ChoiceChip(
          labelPadding: EdgeInsets.all(2.0),
          label: Text(
            _choicesList[index],
            style: Theme.of(context)
                .textTheme
                .bodyText2!
                .copyWith(color: Colors.white, fontSize: 14),
          ),
          selected: defaultChoiceIndex == index,
          selectedColor: Colors.deepPurple,
          onSelected: (value) {
            setState(() {
              defaultChoiceIndex = value ? index : defaultChoiceIndex;
            });
          },
          // backgroundColor: color,
          elevation: 1,
          padding: EdgeInsets.symmetric(
              horizontal: SizeConfig.widthMultiplier * 4),
        );
      }),
    );

Answer 2

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(),
    );
  }
}

Answer 3

您只需要使用您想要的布局创建自己的小部件，并将其作为芯片的标签。

// Your custom widget...
class CustomChipLabel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      child: Row(
        children: <Widget>[
          IconButton(
              iconSize: 40.0,
              icon: Icon(Icons.person),
              onPressed: null),
          Text("My Custom Chip", style: TextStyle(
            fontSize: 20.0,

          ),),
        ],
      )
    );
  }
}

Wrap(
  children: <Widget>[
    ChoiceChip(
      selected: _isSelected
      label: CustomChipLabel(), // your custom label widget
    ),
  ],
);

Answer 4

好的，我发现了一种方法，但我认为必须有一些更有效的方法，创建一个字符串列表并传递值，但我无法对其进行编码。如果有人知道执行此操作的任何更有效的方法，他们的贡献将受到赞赏。

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

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

@override
Widget build(BuildContext context) {
return Wrap(
  alignment: WrapAlignment.center,
  spacing: 12.0,
  children: <Widget>[
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Phones"),
      selected: _value == 0,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 0 : null;
        });
      },
    ),
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Computers"),
      selected: _value == 1,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 1 : null;
        });
      },
    ),
    ChoiceChip(
      pressElevation: 0.0,
      selectedColor: Colors.blue,
      backgroundColor: Colors.grey[100],
      label: Text("Accesories"),
      selected: _value == 2,
      onSelected: (bool selected) {
        setState(() {
          _value = selected ? 2 : null;
        });
      },
    ),
  ],
);
}
}