漂浮动作按钮FloatingActionButton
class FloatingActionButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget _floatingActionButton = FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
elevation: 0.0, // 设置阴影
backgroundColor: Colors.red,
// shape: BeveledRectangleBorder( // 设置按钮形状
// borderRadius: BorderRadius.circular(30.0)
// ),
);
// extended创建的漂浮动作按钮
final _floatingActionButtonExtended = FloatingActionButton.extended(
onPressed: (){},
icon: Icon(Icons.add),
label: Text('Add'),
);
return Scaffold(
appBar: AppBar(
title: Text('FloatingActionButtonDemo'),
elevation: 0.0,
),
// 漂浮动作按钮
floatingActionButton: _floatingActionButton,
// 漂浮动作按钮默认会在底部工具栏上面，可以通过下面方法调整漂浮动作按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: Container(height: 50,),
shape: CircularNotchedRectangle(), // 设置漂浮动作按钮与底部工具栏之间的切口
),
);
}
}
文字按钮FlatButton
final Widget flatButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 文字按钮
FlatButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
textColor: Colors.indigo, // 设置文字的颜色
),
FlatButton.icon(
onPressed: (){},
icon: Icon(Icons.add), // 给文字按钮添加图标，图标在文字左侧
label: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
textColor: Colors.indigo, // 设置文字的颜色
),
],
);
RaisedButton
// RaisedButton会带背景颜色和阴影效果
final Widget raisedButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
elevation: 10.0, // 设置阴影效果
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
),
SizedBox(width: 16.0,),
// 在主题里设置按钮的样式
Theme(
data: Theme.of(context).copyWith(
buttonColor: Colors.orange,
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
// 斜角矩形
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(5.0),
// ),
// 圆角
shape: StadiumBorder(),
),
),
child: RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.add),
label: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
textColor: Colors.indigo, // 设置文字的颜色
),
),
],
);
描边按钮OutlineButton
final Widget outlineButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 描边按钮
OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
SizedBox(width: 16.0,),
// 在主题里设置按钮的样式
Theme(
data: Theme.of(context).copyWith(
buttonColor: Colors.orange,
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
// 斜角矩形
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(5.0),
// ),
// 圆角
shape: StadiumBorder(),
),
),
child: OutlineButton.icon(
onPressed: (){},
icon: Icon(Icons.add),
label: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
textColor: Colors.indigo, // 设置文字的颜色
),
),
],
);
按钮容器Container：使按钮有固定宽度
final Widget fixedWidthButton = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 给按钮固定宽度就将按钮放在Containner中
Container(
width: 160,
child: OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
)
],
);
按钮容器Expanded：使按钮占满可用宽度
final Widget expandedButton = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使按钮占满可用宽度
Expanded(
child: OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
),
SizedBox(width: 16,),
Expanded(
flex: 2, // 设置按钮宽度的占比
child: OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
),
],
);
按钮容器ButtonBar：可以使一组按钮等边距横排显示
final Widget buttonBarDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(
buttonTheme: ButtonThemeData(
padding: EdgeInsets.symmetric(horizontal: 32.0),
)
),
child: ButtonBar( // 一组带边距的横排显示按钮，边距的值会根据按钮主题里面设置的值来决定
children: <Widget>[
OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
OutlineButton(
onPressed: (){},
child: Text('Button'),
splashColor: Colors.blue, // 设置溅墨效果的颜色
color: Theme.of(context).primaryColor, // 设置按钮背景颜色
textColor: Colors.indigo, // 设置文字的颜色
textTheme: ButtonTextTheme.primary, // 设置按钮文字颜色
borderSide: BorderSide(color: Colors.indigo), // 设置描边颜色
highlightedBorderColor: Colors.blue, // 设置高亮状态描边的颜色
),
],
),
),
],
);
下拉菜单按钮：PopupMenuButton
class PopupMenuDemo extends StatefulWidget {
@override
_PopupMenuDemoState createState() => _PopupMenuDemoState();
}
class _PopupMenuDemoState extends State<PopupMenuDemo> {
String _currentMenuItem = 'Home';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('PopupMenuDemo'), elevation: 0.0,),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_currentMenuItem),
PopupMenuButton(
onSelected: (value) {
setState(() {
_currentMenuItem = value;
});
},
itemBuilder: (BuildContext context) => [
PopupMenuItem(child: Text('Home'), value: 'Home',),
PopupMenuItem(child: Text('Discover'), value: 'Discover',),
PopupMenuItem(child: Text('Community'), value: 'Community',),
],
),
],
)
],
),
),
);
}
}
网友评论