直接上代码,简单的下拉菜单封装
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_app/utils/CXColors.dart'; class DropDownSelect extends StatelessWidget { final String label; String value; final List<DropdownMenuItem> items; final ValueChanged onChanged; bool isText; DropDownSelect({Key key, this.label, this.value, this.items, this.onChanged, this.isText = false}); @override Widget build(BuildContext context) { return new Container( height: 50.0, padding: EdgeInsets.fromLTRB(20.0, 0, 20.0, 0), decoration: new BoxDecoration( border: Border( bottom: BorderSide(color: CXColors.titleColor_cc, 0.5), ), ), child: Row( children: <Widget>[ new Expanded( flex: 3, child: new Container( child: new Text( this.label, style: TextStyle(fontSize: 16.0, color: Colors.black87), ), ), ), new Expanded( flex: 8, child: Container( padding: EdgeInsets.only(top: 4.0), child: this.isText ? Text(this.value) : DropdownButton( icon: Icon( Icons.arrow_downward, color: Colors.black26, ), style: TextStyle(fontSize: 15.0, color: Colors.black54), iconSize: 22.0, isExpanded: true, underline: new Container(), hint: Text('请选择', style: TextStyle( color: Colors.black26 ), ), items: this.items, onChanged: onChanged, value: this.value, ), ), ), ], ), ); } }
使用方式:
// 声明items List<DropdownMenuItem> _items = [ new DropdownMenuItem(child: Text('是'), value: '是'), new DropdownMenuItem(child: Text('否'), value: '否'), ]; // 声明value,默认值是否 String _value = '否'; // 使用Widget DropDownSelect( label: '下拉菜单', items: _items, value: _value, isText: false, // 为true时显示不可编辑文本,为false时显示下拉菜单,主要用于展示和编辑 onChanged: (T) { setState(() { _value = T; }); }, ),