如何在Flutter中实现指定样式下拉菜单及自定义CupertinoSwitch颜色

一、指定样式下拉菜单实现 #

你可以通过showMenu配合自定义触发组件实现，可灵活调整所有样式细节，示例代码如下：

bool isOpen = false;
// 下拉触发按钮
GestureDetector(
  onTap: () async {
    // 控制弹出位置，可根据按钮实际位置调整参数
    final RenderBox button = context.findRenderObject() as RenderBox;
    final Offset position = button.localToGlobal(Offset.zero);
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(
        position.dx, 
        position.dy + button.size.height + 4, 
        position.dx + button.size.width, 
        position.dy + button.size.height + 200
      ),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      elevation: 3,
      items: [
        PopupMenuItem(
          value: "option1",
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: Text("选项一"),
          ),
        ),
        PopupMenuItem(
          value: "option2",
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: Text("选项二"),
          ),
        ),
        // 可按需添加更多选项、分割线、选中高亮样式
      ],
    ).then((selectedVal) {
      if (selectedVal != null) {
        // 处理选中逻辑
      }
    });
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.grey.shade300),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: const [
        Text("请选择选项"),
        SizedBox(width: 8),
        Icon(Icons.keyboard_arrow_down, size: 20),
      ],
    ),
  ),
)

如果需要更复杂的交互（比如多选、搜索），可以自己封装PopupRoute自定义弹出层内容。

二、自定义CupertinoSwitch颜色 #

直接设置CupertinoSwitch的自带属性即可实现需求：

• 未选中状态背景色（轨道色）通过trackColor设置为白色
• 滑块颜色通过thumbColor设置为琥珀色
  示例代码如下：

bool switchValue = false;
CupertinoSwitch(
  value: switchValue,
  onChanged: (val) {
    setState(() {
      switchValue = val;
    });
  },
  // 未选中轨道背景设为白色
  trackColor: Colors.white,
  // 滑块设为琥珀色
  thumbColor: Colors.amber,
  // 可选：设置选中状态的轨道颜色
  activeTrackColor: Colors.grey.shade200,
)

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