1.DecoratedBox组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DecoratedBox组件',
home: Scaffold(
appBar: AppBar(
title: Text('DecoratedBox组件')
),
// 对容器进行装饰
body: Container(
width: 200.0,
height: 200.0,
// 对Container 进行装饰
child: DecoratedBox(
/**
* 装饰定位
* DecorationPosition.background 背景模式 (文字在背景上面)
* DecorationPosition.foreground 前景模式 (文字在背景下面)
* */
position: DecorationPosition.foreground,
decoration: BoxDecoration(
// 添加背景色
color: Colors.blue,
// 设置背景图片
image: DecorationImage(
// 图片填充方式
fit: BoxFit.contain,
// 背景图片
image: ExactAssetImage('assets/1.png')
),
// 添加圆角
// borderRadius: BorderRadius.circular(150.0),
// 边框
border: Border.all(
// 边框颜色
color: Colors.red,
// 边框大小
width: 2.0
),
// 边框形状 (BoxShape.circle 为圆形时 和 borderRadius 圆角冲突)
shape: BoxShape.circle
),
child: Text(
'定位演示',
style: TextStyle(fontSize: 20.0, color: Colors.green)
),
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
2.FittedBox组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FittedBox组件',
home: Scaffold(
appBar: AppBar(
title: Text('FittedBox组件')
),
body: Center(
child: Column(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
// 填充容器
child:FittedBox(
/**
* BoxFit.fill 全部显示 显示可能拉伸 充满
* BoxFit.contain 全部显示 显示原比例 不需要填充
* BoxFit.cover 显示可能拉伸 可能裁剪 充满
* BoxFit.fitWidth 显示可能拉伸 可能裁剪 宽度充满
* BoxFit.fitHeight 显示可能拉伸 可能裁剪 高度充满
* BoxFit.none
* BoxFit.scaleDown 效果和contain差不多 但是此属性不允许显示超过源图片大小, 可小不可大
* */
fit: BoxFit.fill,
alignment: Alignment.center,
child: Container(
color: Colors.green,
child: Text(
'BoxFit.fill',
style: TextStyle(
color: Colors.white
),
)
)
)
)
],
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
3.OverflowBox组件
可溢出组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OverflowBox组件',
home: Scaffold(
appBar: AppBar(
title: Text('OverflowBox组件')
),
body: Container(
color: Colors.green,
height: 200.0,
width: 200.0,
padding: const EdgeInsets.all(6.0),
// 溢出容器
child: OverflowBox(
// 对齐方式
alignment: Alignment.topLeft,
// 限定条件
maxWidth: 300.0,
maxHeight: 500.0,
child: Container(
color: Colors.blueGrey,
width: 400.0,
height: 400.0
)
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
4.RotatedBox组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RotatedBox组件',
home: Scaffold(
appBar: AppBar(
title: Text('RotatedBox组件')
),
body: Container(
child: Column(
children: <Widget>[
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('旋转'),
quarterTurns: 1, // 旋转一周 需要4次
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('旋转'),
quarterTurns: 2, // 旋转一周 需要4次
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('旋转'),
quarterTurns: 3, // 旋转一周 需要4次
),
SizedBox(
height: 20.0
),
RotatedBox(
child: Text('旋转'),
quarterTurns: 4, // 旋转一周 需要4次
),
]
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
5.SizedBox组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SizedBox组件',
home: Scaffold(
appBar: AppBar(
title: Text('SizedBox组件')
),
body: Container(
// 指定大小
child: SizedBox(
width: 200,
height: 200,
child: Container(
// 宽高无效
width: 300.0,
height: 300.0,
color: Colors.green,
child: Text('不会超出'),
)
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
6.DropdownButton下拉组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DropdownButton 下拉组件',
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton下拉组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
var selectItemValue = '上海';
class Domes extends StatelessWidget {
List<DropdownMenuItem> grnerateItemList(){
final List<DropdownMenuItem> items = new List();
final DropdownMenuItem item1 = DropdownMenuItem(child: Text('北京'), value: '北京');
final DropdownMenuItem item2 = DropdownMenuItem(child: Text('上海'), value: '上海');
final DropdownMenuItem item3 = DropdownMenuItem(child: Text('广州'), value: '广州');
final DropdownMenuItem item4 = DropdownMenuItem(child: Text('深圳'), value: '深圳');
items.add(item1);
items.add(item2);
items.add(item3);
items.add(item4);
return items;
}
@override
Widget build(BuildContext context) {
return DropdownButton(
// 下拉列表数据
items: grnerateItemList(),
// 改变事件
onChanged: (T){
print('1');
// T 就是选中的值
},
// 提示文本
hint: Text('请选择一个城市'),
// 默认选中
value: selectItemValue,
// 下拉 icon 大小
iconSize: 40.0,
// 下拉文本样式
style: TextStyle(
color: Colors.green
),
// 阴影高度
elevation: 20,
// 和父容器一样高
isExpanded: true,
);
}
}
7.FlatButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FlatButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('FlatButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// 图标+文本
FlatButton.icon(
onPressed: null,
icon: Icon(Icons.print),
label: Text('默认按钮')
),
// 纯文本
FlatButton(
onPressed: null,
child: Text(
"点击登陆按钮"
),
// 按钮背景色
color: Colors.green,
// 按钮高亮
colorBrightness: Brightness.dark,
// 失效时的背景色
disabledColor: Colors.grey,
// 失效时的文本色
disabledTextColor: Colors.red,
// 文本颜色
textColor: Colors.white,
// 按钮主题
textTheme: ButtonTextTheme.accent,
// 墨汁飞溅的颜色
splashColor: Colors.blue,
// 抗锯齿能力
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0,
left: 5.0,
right: 5.0
),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.white,
width: 2.0,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)
)
),
onLongPress: (){
},
)
],
);
}
}
8.FloatingActionButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FloatingActionButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('FloatingActionButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('按钮'),
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(Icons.add),
isExtended: true,
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('按钮'),
// 提示信息
tooltip: '提示信息',
// 前景色
foregroundColor: Colors.white,
// 切换效果
heroTag: null,
// 未点击的阴影
elevation: 8.0,
// 点击阴影
highlightElevation: 16.0,
// 类型分 regular mini add extended
mini: false,
// 形状(方角)
shape: Border.all(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
onPressed: (){
},
),
FloatingActionButton(
backgroundColor: Colors.red,
child: Text('按钮'),
// 提示信息
tooltip: '提示信息',
// 前景色
foregroundColor: Colors.white,
// 切换效果
heroTag: null,
// 未点击的阴影
elevation: 8.0,
// 点击阴影
highlightElevation: 16.0,
// 类型分 regular mini add extended
mini: false,
// 形状(圆角)
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(2.0),
topLeft: Radius.circular(2.0),
bottomRight: Radius.circular(2.0),
bottomLeft: Radius.circular(2.0)
)
),
onPressed: (){
},
),
// 扩展按钮
FloatingActionButton.extended(
onPressed: (){},
icon: Icon(Icons.explicit),
label: Text('这是一个扩展按钮')
)
],
);
}
}
9.IconButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'IconButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('IconButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// 图标组件
IconButton(
icon: Icon(Icons.add),
// 对齐方式(根据父容器决定图标的位置)
alignment: AlignmentDirectional.bottomCenter,
// 颜色
color: Colors.blue,
// 图标大小
iconSize: 50.0,
// 墨汁飞溅
splashColor: Colors.red,
// 提示
tooltip: '提示文本',
onPressed: (){}
)
],
);
}
}
10.OutLineButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OutLineButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('OutLineButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
OutlineButton.icon(
onPressed: (){},
icon: Icon(Icons.ac_unit),
label: Text('按钮文字')
),
// 属性 参考 FloatingActionButton组件
OutlineButton(
child: Text('按钮'),
borderSide: BorderSide(
color: Colors.green
),
onPressed: (){
}
)
],
);
}
}
11.OutLineButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OutLineButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('OutLineButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
onPressed: (){},
child: Text('登陆按钮'),
// 背景色
color: Colors.green,
// 亮度
colorBrightness: Brightness.dark,
// 失效的背景色
disabledColor: Colors.grey,
// 文本颜色
textColor: Colors.white30,
// 主题
textTheme: ButtonTextTheme.normal,
// 飞溅
splashColor: Colors.blue,
// 抗锯齿能力
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0
),
// 边框样式
// shape: Border.all(
// width: 2.0,
// color: Colors.red,
// style: BorderStyle.solid
// ),
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
bottomLeft: Radius.circular(4.0),
bottomRight: Radius.circular(4.0)
)
),
),
RaisedButton(
onPressed: (){},
child: Text('登陆按钮'),
// 背景色
color: Colors.green,
// 亮度
colorBrightness: Brightness.dark,
// 失效的背景色
disabledColor: Colors.grey,
// 文本颜色
textColor: Colors.white30,
// 主题
textTheme: ButtonTextTheme.normal,
// 飞溅
splashColor: Colors.blue,
// 抗锯齿能力
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0,
top: 5.0
),
// 边框样式
shape: Border.all(
width: 2.0,
color: Colors.red,
style: BorderStyle.solid
),
)
],
);
}
}
12.RawMaterialButton组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RawMaterialButton组件',
home: Scaffold(
appBar: AppBar(
title: Text('RawMaterialButton组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
//
RawMaterialButton(
onPressed: (){},
textStyle: TextStyle(
fontSize: 28.0,
color: Colors.yellow
),
child: Text('RawMaterialButton'),
// 高亮背景色
highlightColor: Colors.red,
// 飞溅
splashColor: Colors.blue,
// 抗锯齿
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: 5.0
),
// 高亮阴影
highlightElevation: 10.0,
)
],
);
}
}
13.Card组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Card组件',
home: Scaffold(
appBar: AppBar(
title: Text('Card组件')
),
body: Container(
child: Domes()
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class Domes extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Card(
color: Colors.green,
// 阴影
elevation: 10.0,
margin: EdgeInsets.all(20.0),
// 边框样式
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.ac_unit),
title: Text('文本内容'),
subtitle: Text(
'这里是子标题'
),
contentPadding: EdgeInsets.all(20.0),
),
],
)
)
],
);
}
}
