Flutter 的button
2019-07-26 本文已影响0人
王俏
floatingActionButton
import 'package:flutter/material.dart';
class MaterialComponents extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MaterialComponents'),
elevation: 0.0,
),
body: ListView(
children: <Widget>[
ListItem(
title: 'FloatingActionButton', page: FloatingActionButtonDemo()),
],
),
);
}
}
class FloatingActionButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget _floatingActionButton = FloatingActionButton(//普通的漂浮按钮
onPressed: () {},
child: Icon(Icons.add),
elevation: 0.0,
backgroundColor: Colors.black87,
shape: BeveledRectangleBorder(
//正方形
borderRadius: BorderRadius.circular(30),//菱形
),
);
final Widget _floatingActionButtonExtended = FloatingActionButton.extended(//带标签文字的漂浮按钮
onPressed: () {},
icon: Icon(Icons.add),
label: Text('Add'),
);
return Scaffold(
appBar: AppBar(
title: Text('FloatingActionButtonDemo'),
elevation: 0.0,
),
floatingActionButton: _floatingActionButtonExtended,
);
}
}
class ListItem extends StatelessWidget {
final String title;
final Widget page;
ListItem({
this.title,
this.page,
});
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => page),
);
},
);
}
}
bottomNavigationBar
return Scaffold(
appBar: AppBar(
title: Text('FloatingActionButtonDemo'),
elevation: 0.0,
),
floatingActionButton: _floatingActionButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//floatingActionButton的位置
bottomNavigationBar: BottomAppBar(
child: Container(
height: 80.0,
),
shape: CircularNotchedRectangle(),
),
);
}
}
FlatButton
final Widget FlatButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey,
textColor: Theme.of(context).accentColor,
),
FlatButton.icon(
label: Text('Button'),
icon: Icon(Icons.add),
onPressed: () {},
splashColor: Colors.grey,
textColor: Theme.of(context).accentColor,
)
],
);
RaisedButton 有按钮的颜色和阴影效果
final Widget RaisedButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(
buttonColor: Theme.of(context).accentColor,
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(5.0)
// ),
shape: StadiumBorder(),
)),
child: RaisedButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey,
color: Theme.of(context).accentColor, //填充颜色
// textColor: Colors.white,
textTheme: ButtonTextTheme.primary,
elevation: 0.0,
),
),
SizedBox(width: 10.0),
RaisedButton.icon(
label: Text('Button'),
icon: Icon(Icons.add),
onPressed: () {},
splashColor: Colors.grey,
textColor: Theme.of(context).accentColor,
elevation: 5.0,
)
],
);
OutlineButton
final Widget OutlineButtonDemo = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(
buttonColor: Theme.of(context).accentColor,
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
// shape: BeveledRectangleBorder(
// borderRadius: BorderRadius.circular(5.0)
// ),
shape: StadiumBorder(),
)),
child: OutlineButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black,//边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
),
SizedBox(width: 10.0),
OutlineButton.icon(
label: Text('Button'),
icon: Icon(Icons.add),
onPressed: () {},
splashColor: Colors.grey,
textColor: Theme.of(context).accentColor,
)
],
);
FixedWidthButton
final Widget FixedWidthButton = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 130.0,
child: OutlineButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black, //边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
),
],
);
ExpandedButton
final Widget ExpandedButton = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: OutlineButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black, //边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
),
SizedBox(width: 16.0),
Expanded(
flex: 2, //等分占的比例,默认是1
child: OutlineButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black, //边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
),
],
);
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(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black, //边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
OutlineButton(
child: Text('Button'),
onPressed: () {},
splashColor: Colors.grey[100],
borderSide: BorderSide(
color: Colors.black, //边框颜色
),
textColor: Colors.black,
highlightedBorderColor: Colors.grey,
// textTheme: ButtonTextTheme.primary,
),
],
),
);
PopupMenu
import 'package:flutter/material.dart';
class PopupMemuDemo extends StatefulWidget {
@override
_PopupMemuDemoState createState() => _PopupMemuDemoState();
}
class _PopupMemuDemoState extends State<PopupMemuDemo> {
String _currentMemuItem = 'Home';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('PopupMenuButtonDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_currentMemuItem),
PopupMenuButton(
onSelected: (value) {
print(value);
setState(() {
_currentMemuItem = value;
});
},
itemBuilder: (BuildContext context) => [
PopupMenuItem(
value: 'Home',
child: Text('Home'),
),
PopupMenuItem(
value: 'Discover',
child: Text('Discover'),
),
PopupMenuItem(
value: 'Community',
child: Text('Community'),
),
],
)
],
),
],
),
),
);
}
}
