如何将 ChoiceChip 的宽度增加到相同的值？

Question

我正在使用 https://api.flutter.dev/flutter/material/ChoiceChip-class.html，我想让它们大小相同。

我找到了这个解决方案但填充不是解决方案，因为宽度取决于文本大小所以我为每个 ChoiceChip 获得不同的宽度。

我也试过用 Container 包装它，但这对我也不起作用。

ChoiceChip(
     label: AutoSizeText(local.searchNoLocation),
     selected: helperSelected == 3,
     selectedColor: Color(0xffffcfcf),
     labelStyle: TextStyle(
        color: helperSelected == 3 ? Colors.red[300] : Colors.black),
     onSelected: (_) {
        setState(() => helperSelected = 3);
     })

Answer 1

要使它们实际上大小相同，您需要标签具有相同的大小。如果您希望它们在 Row 或 Column 内并在 mainAxis 中使用相同数量的 space，您可以将它们包装在 Expanded 小部件内。

Row(
  children: const [
    Expanded(
      child: ChoiceChip(
        selected: false,
        label: Text('Bigger Text'),
      ),
    ),
    Expanded(
      child: ChoiceChip(
        selected: false,
        label: Text('Text'),
      ),
    ),
  ],
),

Answer 2

只需将标签属性包裹在您可以控制其宽度和高度的任何小部件（例如 Container 或 SizedBox

）

  ChoiceChip(
            label: Container(
                width: 50,
                child: Text("searchNoLocation",overflow: TextOverflow.ellipsis,)),
            selected: helperSelected == 3,
            selectedColor: Color(0xffffcfcf),
            labelStyle: TextStyle(
                color: helperSelected == 3 ? Colors.red[300] : Colors.black),
            onSelected: (_) {
              setState(() => helperSelected = 3);
            }),
        ChoiceChip(
            label: Container(
                width: 250,
                height: 40,
                alignment: AlignmentDirectional.center,
                child: Text("searchNoLocation",overflow: TextOverflow.ellipsis,)),
            selected: helperSelected == 3,
            selectedColor: Color(0xffffcfcf),
            labelStyle: [![TextStyle][1]][1](
                color: helperSelected == 3 ? Colors.red[300] : Colors.black),
            onSelected: (_) {
              setState(() => helperSelected = 3);
            }),

如何将 ChoiceChip 的宽度增加到相同的值？

How to increase width of ChoiceChip to same value for all?

android-chips

flutter