ButtonBarTheme ButtonBarThemeData ButtonBar样式
大约 2 分钟
ButtonBarTheme
继承关系
Object> DiagnosticableTree> Widget> ProxyWidget> InheritedWidget> ButtonBarTheme
构造函数
const ButtonBarTheme({
Key key,
@required this.data,
Widget child,
}) : assert(data != null), super(key: key, child: child);
- key 组件的唯一标示。
- data 主题的数据来源ButtonBarThemeData,详细的配置信息。
- child 通常ButtonBar组件,默认继承ButtonBarThemeData的配置,设置局部主题时使用。
ButtonBarTheme通常用于ButtonBar的主题使用,它有一套默认主题,在你没有做变更的前提下,作为ThemeData构造函数的参数,你可以轻松做到全局改主题样式。
配置全局样式在中设置:
MaterialApp(
theme: ThemeData(
buttonBarTheme:
ButtonBarThemeData(buttonTextTheme: ButtonTextTheme.normal)),
...
)
使用ButtonBar时采用此主题:
ButtonBar(
children: <Widget>[
RaisedButton(child: Text('老孟'),onPressed: (){
},),
FlatButton(child: Text('专注flutter分享'),onPressed: (){
},)
],
)
局部用法,主题和全局主题不一致,用法如下:
ButtonBarTheme(
data: ButtonBarThemeData(buttonTextTheme: ButtonTextTheme.accent),
child: ButtonBar(
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text("局部用法测试"),
)
],
),
)
ButtonBarThemeData
ButtonBarThemeData 是ButtonBarTheme样式属性,属性如下:
const ButtonBarThemeData({
this.alignment,//主轴对其方式,具体可查看MainAxisAlignment
this.mainAxisSize,//主轴方向尺寸,min:尽可能小,max:尽可能大
this.buttonTextTheme,//按钮文本样式
this.buttonMinWidth,//按钮最小宽度
this.buttonHeight,//按钮高度
this.buttonPadding,//按钮内边距
this.buttonAlignedDropdown,//当DropdownButton内包含ButtonBar时,true表示DropdownButton宽度和ButtonBar匹配
this.layoutBehavior,//按钮高度,constrained:最小高度52,padded:根据按钮主题计算
this.overflowDirection, //按钮一行放不开时,垂直方向布局方式,up:开始位置对其, down:结束位置对其
})
用法如下:
ButtonBarTheme(
data: ButtonBarThemeData(
alignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max),
child: ButtonBar(
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("老孟"),
),
RaisedButton(
onPressed: () {},
child: Text("老孟1"),
),
RaisedButton(
onPressed: () {},
child: Text("老孟2"),
),
],
),
)
总结
ButtonBarTheme 是一个InheritedWidget组件,它可以高效的将数据在Widget树中向下传递、共享,所有才有了全局主题和局部主题的用法。
本文由i校长提供。