flutter DropdownButton使用

如果你想要实现如下的按钮选择效果：

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 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

可以看到相当简洁明了