Flutter:下拉框选择

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d4![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/42534ef9c696405ba309f73bc3fd8dad.png)

b70dec92594838a8b2c130717938aa.png)

文档地址dropdown_button2

js 复制代码
  // 限价、市价 状态
  final List<String> orderTypes = ['普通委托', '市价委托'];
  String? selectedOrderType = '普通委托';
  changeOrderType(String type) {
    selectedOrderType = type;
    update(["continuous"]);
  }

  // 杠杆
  final List<String> leverages = ['1X', '5X', '10X', '20X', '50X'];
  String? selectedLeverage = '1X';
  changeLeverage(String leverage) {
    selectedLeverage = leverage;
    update(["continuous"]);
  }



  // 委托
  Widget _buildLeftOrderType() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<String>(
        isExpanded: true,
        value: controller.selectedOrderType,
        items: controller.orderTypes.map((item) => DropdownMenuItem<String>(
          value: item,
          child: TextWidget.body(item,size: 26.sp,color: AppTheme.color000,),
        )).toList(),
        onChanged: (value) {
          controller.changeOrderType(value!);
        },
        buttonStyleData: ButtonStyleData(
          height: 72.w, // 高度和你的红框一致
          width: 180.w, // 宽度自适应父容器
          padding: EdgeInsets.only(left: 20.w, right: 0,),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.w),
            color: AppTheme.colorGreen,
          ),
        ),
        dropdownStyleData: DropdownStyleData(
          width: null, // 跟随按钮宽度
          decoration: BoxDecoration(
            color: AppTheme.dividerColor,
            borderRadius: BorderRadius.circular(4),
          ),
          offset: const Offset(0, 0), // 默认正下方弹出
        ),
      ),
    );
  }

  // 杠杆
  Widget _buildLeftLeverage() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<String>(
        isExpanded: true,
        value: controller.selectedLeverage,
        items: controller.leverages.map((item) => DropdownMenuItem<String>(
          value: item,
          child: TextWidget.body(item,size: 26.sp,color: AppTheme.color000,),
        )).toList(),
        onChanged: (value) {
          controller.changeLeverage(value!);
        },
        buttonStyleData: ButtonStyleData(
          height: 72.w, // 高度和你的红框一致
          width: 140.w, // 宽度自适应父容器
          padding: EdgeInsets.only(left: 20.w, right: 0,),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.w),
            border: Border.all(width: 1,color: AppTheme.dividerColor2),
          ),
        ),
        dropdownStyleData: DropdownStyleData(
          width: null, // 跟随按钮宽度
          decoration: BoxDecoration(
            color: AppTheme.dividerColor,
            borderRadius: BorderRadius.circular(4),
          ),
          offset: const Offset(0, 0), // 默认正下方弹出
        ),
      ),
    );
  }
相关推荐
廖松洋(Alina)5 小时前
【收尾以及复盘】flutter开发鸿蒙APP之成就徽章页面
flutter·华为·开源·harmonyos·鸿蒙
ZH15455891315 小时前
Flutter for OpenHarmony Python学习助手实战:机器学习算法实现的实现
python·学习·flutter
廖松洋(Alina)5 小时前
【收尾以及复盘】flutter开发鸿蒙APP之打卡日历页面
flutter·华为·开源·harmonyos·鸿蒙
廖松洋(Alina)5 小时前
【收尾以及复盘】flutter开发鸿蒙APP之本月数据统计页面
flutter·华为·开源·harmonyos·鸿蒙
renke33646 小时前
Flutter for OpenHarmony:构建一个 Flutter 数字迷宫游戏,从随机路径生成到认知训练系统的完整工程实践与跨学科深度解析
flutter·游戏
子春一6 小时前
Flutter for OpenHarmony:构建一个 Flutter 数字消消乐游戏,深入解析网格状态管理、合并算法与重力系统
算法·flutter·游戏
程序员老刘·19 小时前
Android Studio Otter 3 发布:日常开发选AS还是Cursor?
flutter·android studio·ai编程·跨平台开发·客户端开发
浩辉_19 小时前
Dart - 内存管理与垃圾回收(GC)深度解析
flutter·dart
一起养小猫21 小时前
Flutter for OpenHarmony 实战:记忆棋游戏完整开发指南
flutter·游戏·harmonyos
Betelgeuse761 天前
【Flutter For OpenHarmony】TechHub技术资讯界面开发
flutter·ui·华为·交互·harmonyos