标签：上海 私有 初始化 highlight mod enter color oat 必须
由于Flutter是跨平台的，所以有适用于Android和iOS的两种风格的组件。一套是Google极力推崇的Material，一套是iOS的Cupertino风格的组件。无论哪种风格，都是通用的。
|
控件 |
Material |
Cupertino |
|---|---|---|
|
Button |
RaisedButton |
 CupertinoButton
|
|
DatePick |
 showDatePicker
|
CupertinoDatePicker |
从多年与设计师打交道来看，App更青睐于iOS，很多Android的App做的跟iOS一样一样的，就连设计个按钮图标啥的都是一样。
属性
RaisedButton({ Key key, //点击按钮的回调出发事件 @required VoidCallback onPressed, //水波纹高亮变化回调 ValueChanged<bool> onHighlightChanged, //按钮的样式（文字颜色、按钮的最小大小，内边距以及shape）[ Used with [ButtonTheme] and [ButtonThemeData] to define a button‘s base //colors, and the defaults for the button‘s minimum size, internal padding,and shape.] ButtonTextTheme textTheme, //文字颜色 Color textColor, //按钮被禁用时的文字颜色 Color disabledTextColor, //按钮的颜色 Color color, //按钮被禁用时的颜色 Color disabledColor, //按钮的水波纹亮起的颜色 Color highlightColor, //水波纹的颜色 Color splashColor, //按钮主题高亮 Brightness colorBrightness, //按钮下面的阴影长度 double elevation, //按钮高亮时的下面的阴影长度 double highlightElevation, double disabledElevation, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior = Clip.none, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, Widget child, }
一张图了解RaisedButton
RaisedButton( textTheme: ButtonTextTheme.accent, color: Colors.teal, highlightColor: Colors.deepPurpleAccent, splashColor: Colors.deepOrangeAccent, colorBrightness: Brightness.dark, elevation: 50.0, highlightElevation: 100.0, disabledElevation: 20.0, onPressed: () { //TODO }, child: Text( ‘RaisedButton‘, style: TextStyle(color: Colors.white, fontSize: 40), ), )
FloatingActionButton({ Key key, // 按钮上的组件，可以是Text、icon, etc. this.child, //长按提示 this.tooltip, // child的颜色（尽在child没有设置颜色时生效） this.foregroundColor, //背景色，也就是悬浮按键的颜色 this.backgroundColor, this.heroTag = const _DefaultHeroTag(), //阴影长度 this.elevation = 6.0, //高亮时阴影长度 this.highlightElevation = 12.0, //按下事件回调 @required this.onPressed, //是小图标还是大图标 this.mini = false, //按钮的形状(例如：矩形Border，圆形图标CircleBorder) this.shape = const CircleBorder(), this.clipBehavior = Clip.none, this.materialTapTargetSize, this.isExtended = false, })
示例代码
FloatingActionButton( child: Icon(Icons.access_alarm), tooltip: "ToolTip", foregroundColor: Colors.white, backgroundColor: Colors.deepPurple, shape: const Border(), onPressed: () { //click callback }, )
一个扁平的Material按钮，属性跟RaisedButton类似。
FlatButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior = Clip.none, MaterialTapTargetSize materialTapTargetSize, @required Widget child, })
示例代码
FlatButton( onPressed: () {}, child: Text( "FlatBtn", style: TextStyle(fontSize: 20, color: Colors.deepPurple), ));
效果
图标按钮，按下时会产生水波纹效果。
IconButton({ Key key, this.iconSize = 24.0, this.padding = const EdgeInsets.all(8.0), this.alignment = Alignment.center, @required this.icon, this.color, this.highlightColor, this.splashColor, this.disabledColor, @required this.onPressed, this.tooltip })
效果
Material Style 下拉菜单按钮
DropdownButton使用
DropdownButton({ Key key, //要显示的列表 List<DropdownMenuItem<T>> @required this.items, //下拉菜单选中的值（注意：在初始化时，要么为null，这时显示默认hint的值； // 如果自己设定值，则值必须为列表中的一个值，如果不在列表中，会抛出异常） T value, //默认显示的值 Widget hint, Widget disabledHint, //选中时的回调 ValueChanged<T> @required this.onChanged, this.elevation = 8, this.style, this.iconSize = 24.0, this.isDense = false, this.isExpanded = false, })
items使用方法
//返回城市列表， List<DropdownMenuItem> _getItems() { List<DropdownMenuItem> items = new List(); //value 表示DropdownButton.onChanged的返回值 items.add(DropdownMenuItem(child: Text("北京"), value: "BJ")); items.add(DropdownMenuItem(child: Text("上海"), value: "SH")); items.add(DropdownMenuItem(child: Text("广州"), value: "GZ")); items.add(DropdownMenuItem(child: Text("深圳"), value: "SZ")); return items; }
写法二
//返回城市列表， List<DropdownMenuItem<String>> _getCityList() { var list = ["北京", "上海", "广州", "深圳"]; return list.map((item) => DropdownMenuItem( value: item, child: Text(item), )).toList(); }
使用方法
由于我们在点击每一个条目后，展示的选中条目会变化，所以DropdownButton应当继承StatefulWidget，在选中条目后也就是onChange的回调中使用setState((){})更新对象的状态。
DropdownButton
class FlutterDropdownButtonStatefulWidget extends StatefulWidget { @override State<StatefulWidget> createState() { return _DropdownState(); } }
_DropdownState
//下划线开头表示私有 class _DropdownState extends State<FlutterDropdownButtonStatefulWidget> { // 下拉菜单选中的值（注意：在初始化时，要么为null，这时显示默认hint的值； // 如果自己设定值，则值必须为列表中的一个值，如果不在列表中，会抛出异常） String selectValue; @override Widget build(BuildContext context) { return DropdownButton( //要显示的条目 items: _getItems(), //默认显示的值 hint: Text("请选择城市"), //下拉菜单选中的值（注意：在初始化时，要么为null，这时显示默认hint的值； // 如果自己设定值，则值必须为列表中的一个值，如果不在列表中，会抛出异常） value: selectValue, onChanged: (itemValue) {//itemValue为选中的值 print("itemValue=$itemValue"); _onChanged(itemValue); }, ); } _onChanged(String value) { //更新对象的状态 setState(() { selectValue = value; }); } }
print log
最终效果
PopupMenuButton({ Key key, //构建弹出式列表数据 PopupMenuItemBuilder<T> @required this.itemBuilder, //初始值 T initialValue, //选中时的回调 PopupMenuItemSelected<T> onSelected;, //当未选中任何条目后弹窗消失时的回调 final PopupMenuCanceled onCanceled;, // this.tooltip, //弹窗阴影高度 this.elevation = 8.0, //边距 this.padding = const EdgeInsets.all(8.0), //弹窗的位置显示的组件，默认为三个点... this.child, //跟child效果一致 this.icon, //弹窗偏移位置 this.offset = Offset.zero, })
import ‘package:flutter/material.dart‘; class FlutterPopupMenuButton extends StatefulWidget { @override State<StatefulWidget> createState() => _PopupMenuState(); } const List<String> models = const <String>[‘白天模式‘, ‘护眼模式‘, ‘黑夜模式‘]; class _PopupMenuState extends State<FlutterPopupMenuButton> { String title = models[0]; List<PopupMenuEntry<String>> _getItemBuilder() { return models.map((item) => PopupMenuItem<String>( child: Text(item), value: item,//value一定不能少 )).toList(); } void _select(String value) { setState(() { title = value; }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text(title), actions: <Widget>[ PopupMenuButton<String>( onSelected: _select, itemBuilder: (BuildContext context) { return _getItemBuilder(); }, ) ], ), ), ); } // List<PopupMenuEntry> _getItemBuilder() { // List<PopupMenuEntry> list = List(); // list.add(PopupMenuItem( // child: Text("白天模式"), // value: "Day", // )
); // list.add(PopupMenuItem( // child: Text("黑夜模式"), // value: "Night", // )
); // return list; // }
}
水平排列的按钮组
属性
const ButtonBar({ Key key, //子组件的间隔样式 this.alignment = MainAxisAlignment.end, this.mainAxisSize = MainAxisSize.max, //子children this.children = const <Widget>[], })
示例代码
class FlutterButtonBar extends StatelessWidget { @override Widget build(BuildContext context) { return ButtonBar(children: <Widget>[ Text("ButtonBar0"), Icon(Icons.ac_unit), Text("ButtonBar1") ],
); } }
标签：上海 私有 初始化 highlight mod enter color oat 必须
原文地址：https://www.cnblogs.com/lxlx1798/p/11371126.html
