Flutter：如何在容器内实现下拉按钮？解决宽度/切换/边框问题

核心问题 #

1. 布局层级冗余：Pilihan1里嵌套了Scaffold，作为子Widget完全没必要，这会打乱父容器的布局约束，直接引发宽度溢出问题。
2. 宽度约束冲突：父容器Data4的宽度仅设为100，但下拉框外层的SizedBox硬设了310的宽度，明显超出父容器范围，导致布局报错。
3. 边框状态缺失：只给DropdownButtonFormField设置了enabledBorder，切换选项时的聚焦、选中状态没有对应边框配置，导致边框偶尔消失。

修正后的代码 #

class Data4 extends StatelessWidget {
  const Data4({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 310, // 可根据需求调整，或用MediaQuery做屏幕适配
        height: 150,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
        child: const Pilihan1(), // 移除多余Row，直接放置子组件
      ),
    );
  }
}

class Pilihan1 extends StatefulWidget {
  const Pilihan1({Key? key}) : super(key: key);

  @override
  State<Pilihan1> createState() => _Pilihan1State();
}

class _Pilihan1State extends State<Pilihan1> {
  List<String> items = ['Pilih Pengantar', 'Pengantar 1', 'Pengantar 2'];
  String? selectedItem = 'Pilih Pengantar';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0), // 加内边距避免组件贴边
      child: DropdownButtonFormField<String>(
        isExpanded: true, // 让下拉框自动占满父容器宽度
        decoration: InputDecoration(
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(width: 2, color: Colors.black),
          ),
          focusedBorder: OutlineInputBorder( // 补充聚焦状态边框
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(width: 2, color: Colors.black),
          ),
          errorBorder: OutlineInputBorder( // 补充错误状态边框
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(width: 2, color: Colors.black),
          ),
          focusedErrorBorder: OutlineInputBorder( // 补充聚焦错误状态边框
            borderRadius: BorderRadius.circular(12),
            borderSide: const BorderSide(width: 2, color: Colors.black),
          ),
        ),
        value: selectedItem,
        items: items
            .map((item) => DropdownMenuItem<String>(
                  value: item,
                  child: Text(item, style: const TextStyle(fontSize: 12)),
                ))
            .toList(),
        onChanged: (item) => setState(() => selectedItem = item),
      ),
    );
  }
}

关键修改点 #

• 移除Pilihan1中的Scaffold和Center，子Widget不需要独立的页面骨架。
• 调整父容器Data4的宽度为合理值，避免和子组件宽度冲突。
• 给DropdownButtonFormField添加isExpanded: true，让它自动适配父容器宽度。
• 补充所有状态下的边框配置，保证切换选项时边框不会消失。
• 移除多余的Row组件，简化布局层级。

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