直接上代碼,簡單的下拉菜單封裝
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, width: 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; }); }, ),