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

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

我正在使用 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);
     })

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

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

只需将标签 属性 包裹在您可以控制其宽度和高度的任何小部件(例如 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);
            }),