如果你想要实现如下的按钮选择效果：
image.png
image.png
那这里用到的就是DropdownButton widget；
这里主要说下如何在一个页面中存在多个相同选项处理封装：
通常数据有如下结构：
List status = [{'id': 1, 'name': '全部',},{'id': 2, 'name': '已发货',}, {'id': 3, 'name': '未发货'}];
基于如上数据结构，封装如下：
import 'package:flutter/material.dart';
import 'package:tapai_app/resource/colors.dart';
import 'option_item_decorator.dart';
Widget dropdownButtonItem(String title, List data, Map selectedItem, int selectedId, Function handleChange,) {
List<Widget> widgets = [
Text(title),
DropdownButtonHideUnderline(
// DropdownButton默认有一条下划线（如上图），此widget去除下划线
child: DropdownButton(
items: data.map((item) => DropdownMenuItem(
value: item,
child: Text(item['name'], style: TextStyle(color: item['id'] == selectedId ? AppColors.app_main : AppColors.text_gray6),),
)).toList(),
hint: Text('请选择'),
onChanged: handleChange,
value: selectedItem,
),
),
];
return optionItemDecorator(widgets);
}
使用时代码：
void _handleStatusChange(item) {
setState(() {
statusItem = item;
statusId = item['id'];
});
}
dropdownButtonItem('装车状态', status, statusItem, statusId, _handleStatusChange),
图示页面，代码的封装后写法如下：
image.png
可以看到相当简洁明了
