如何在Flutter中制作带圆形边框的Dropdown（下拉菜单）

你可以通过两种方式实现这种带圆形边框的下拉菜单，以下是具体实现方案：

方案一：使用 DropdownButtonFormField（推荐） #

借助DropdownButtonFormField的InputDecoration可以快速配置边框样式，代码示例如下：

import 'package:flutter/material.dart';

class RoundedDropdown extends StatefulWidget {
  const RoundedDropdown({super.key});

  @override
  State<RoundedDropdown> createState() => _RoundedDropdownState();
}

class _RoundedDropdownState extends State<RoundedDropdown> {
  String? selectedValue;
  final List<String> dropdownItems = ['选项1', '选项2', '选项3', '选项4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200, // 设置下拉框宽度
          child: DropdownButtonFormField<String>(
            value: selectedValue,
            decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white,
              // 核心：设置圆形边框
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
                borderSide: const BorderSide(color: Colors.grey),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
                borderSide: const BorderSide(color: Colors.grey),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
                borderSide: const BorderSide(color: Colors.blue),
              ),
              contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            ),
            items: dropdownItems.map((item) {
              return DropdownMenuItem(
                value: item,
                child: Text(item),
              );
            }).toList(),
            onChanged: (newValue) {
              setState(() {
                selectedValue = newValue;
              });
            },
            icon: const Icon(Icons.arrow_drop_down),
            iconSize: 24,
          ),
        ),
      ),
    );
  }
}

关键说明： #

• BorderRadius.circular(20)：调整数值可以控制圆角的弧度，数值越大边框越圆。
• enabledBorder和focusedBorder分别配置未聚焦、聚焦状态下的边框样式，保证交互一致性。
• filled和fillColor设置下拉框的背景色，和示例图的白色背景匹配。

方案二：使用 Container + DropdownButton #

如果不想用表单组件，也可以用Container包裹DropdownButton来自定义边框：

import 'package:flutter/material.dart';

class RoundedDropdown extends StatefulWidget {
  const RoundedDropdown({super.key});

  @override
  State<RoundedDropdown> createState() => _RoundedDropdownState();
}

class _RoundedDropdownState extends State<RoundedDropdown> {
  String? selectedValue;
  final List<String> dropdownItems = ['选项1', '选项2', '选项3', '选项4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.grey),
              color: Colors.white,
            ),
            child: DropdownButton<String>(
              value: selectedValue,
              underline: const SizedBox(), // 去掉默认下划线
              items: dropdownItems.map((item) {
                return DropdownMenuItem(
                  value: item,
                  child: Text(item),
                );
              }).toList(),
              onChanged: (newValue) {
                setState(() {
                  selectedValue = newValue;
                });
              },
              icon: const Icon(Icons.arrow_drop_down),
              isExpanded: true, // 让下拉按钮占满容器宽度
            ),
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 用Container的decoration属性设置圆形边框和背景色。
• DropdownButton设置underline: const SizedBox()去掉默认的下划线，isExpanded: true让按钮宽度适配容器。

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