为何ChoiceChip无法像ElevatedButton那样结合IntrinsicWidth实现扩展？

核心原因 #

ElevatedButton与ChoiceChip的默认布局约束差异导致了这个问题：

• ElevatedButton默认使用BoxConstraints.expand()约束，会自动填充父组件分配的可用空间，因此配合Expanded能轻松实现等宽扩展。
• ChoiceChip的默认约束是包裹自身内容，仅根据内部label的尺寸确定自身宽度，不会主动利用Expanded分配的额外空间。

解决方案 #

要让ChoiceChip实现和ElevatedButton一致的扩展效果，只需给ChoiceChip添加constraints: BoxConstraints.expand()属性，强制它填充父容器空间：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
          IntrinsicWidth(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: ElevatedButton(
                child: const Text('Larger Text'),
                onPressed: () {},
              )),
              Expanded(
                  child: ElevatedButton(
                child: const Text('Text'),
                onPressed: () {},
              )),
            ],
          )),
          IntrinsicWidth(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: const [
              Expanded(
                  child: ChoiceChip(
                label: Text('Larger Text'),
                selected: false,
                // 添加约束强制填充空间
                constraints: BoxConstraints.expand(),
              )),
              Expanded(
                  child: ChoiceChip(
                label: Text('Text'),
                selected: false,
                // 添加约束强制填充空间
                constraints: BoxConstraints.expand(),
              )),
            ],
          ))
        ]);
  }
}

补充说明 #

如果需要更灵活的尺寸控制，可以自定义BoxConstraints的参数（比如设置最小/最大宽度），也可以用SizedBox.expand()包裹ChoiceChip，效果一致：

Expanded(
  child: SizedBox.expand(
    child: ChoiceChip(
      label: Text('Text'),
      selected: false,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者cabbi