今儿个主要学习一下几个基本组件
Padding Row Column Expended 四个组件
Padding 组件用法
Flutter提供的组件是没有padding属性的,所以在处理内边距的时候,就需要用到Padding组件来设置容器和子元素之间的间距 ,贴代码
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.7,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover),
)
],
));
}
}
fit的几个属性
BoxFit.fill:充满父容器。 可能会拉伸变形
BoxFit.contain:尽可能大,保持图片分辨率。不变形,填不满
BoxFit.cover:充满容器,不变形可能会被截断。
BoxFit.none:图片居中显示,不改变分大小,可能会被截断。
BoxFit.fitWidth:图片填满宽度,高度可能会被截断
BoxFit.fitHeight:图片填满高度,宽度可能会被截断
BoxFit.scaleDown:图片可以完整显示,但是可能不能填充满。
Row组件横向
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 800.0,
width: 400.0,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start, //用的比较少
children: <Widget>[
IconContainer(Icons.search,color: Colors.blue),
IconContainer(Icons.home,color: Colors.orange),
IconContainer(Icons.select_all,color: Colors.red),
],
),
);
}
}
class IconContainer extends StatelessWidget{
double size=32.0;
Color color=Colors.red;
IconData icon;
IconContainer(this.icon,{this.color,this.size});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100.0,
width: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon,size: this.size,color: Colors.white)
),
);
}
}
MainAxisAlignment.start表示居于Container容器X轴开始位置也就是左侧
CrossAxisAlignment.start表示居于Container容器Y轴最上边
MainAxisAlignment.spaceEvenly表示控件均匀铺开
Column水平布局跟ROW用法一样
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 800.0,
width: 400.0,
color: Colors.pink,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
IconContainer(Icons.search,color: Colors.blue),
IconContainer(Icons.home,color: Colors.orange),
IconContainer(Icons.select_all,color: Colors.red),
],
),
);
}
}
Flutter Expanded 类似 Web 中的 Flex 布局(权重的方式布局)
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 180,
color: Colors.black,
child: Text('你好Flutter'),
),
)
],
),
SizedBox(height: 10),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover),
)
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Container(
height: 180,
child: ListView(
children: <Widget>[
Container(
height: 85,
child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover),
),
SizedBox(height: 10),
Container(
height: 85,
child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover),
)
],
)
)
),
],
)
],
);
}
}
flex表示权重比例,同android 中的 weight。
内容比较简单,看代码 ,就不多说了。
网友评论