入口文件
import 'package:flutter/material.dart';
void main() {
runApp(HomeComponent());
}
class HomeComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: Icon(Icons.home),
backgroundColor: Colors.blueGrey,
title: Text("Padding(边距盒子) Row() column(),Expanded(flex布局) 组件"),
),
body: StackGridLearn(),
),
);
}
}
padding组件
class PaddingComLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565001740&di=472870156f1538cdf5a0ce844236faf8&imgtype=0&src=http%3A%2F%2Fwww.tz365.cn%2Fuploads%2Fallimg%2Fc180201%2F151JE424514Z-291T4.jpg",
fit: BoxFit.cover)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064097&di=30a26282b91ffb18b028f8e573e1b0fd&imgtype=0&src=http%3A%2F%2Fi1.mopimg.cn%2Fimg%2Ftt%2F2018-01%2F677%2F20180107183003683.jpg",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d67d56c2e8d1bad1ac1833f044f9d611&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541124.jpg%3Fdown",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d67d56c2e8d1bad1ac1833f044f9d611&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541124.jpg%3Fdown",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064089&di=9b2990fa4a4d770ecd7e42060ebb2f8f&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F2cf5e0fe9925bc31d5343b9d5cdf8db1cb13704d.jpg",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650869447&di=6e72c936594e62e884a85ff56f08b1ff&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F30%2F20151130192227_V3TBJ.thumb.700_0.jpeg",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650869433&di=ee97e2de8c7ecfb04814dc0c554e5fad&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-06ca7dec67485c824ceb3c02d7a18980_hd.jpg",
fit: BoxFit.cover,
)),
Padding(
padding: EdgeInsets.all(10),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650914666&di=2f2b4e59bc1ce3d18ebe5e3fa3b5b9db&imgtype=0&src=http%3A%2F%2Fimg.mingxing.com%2Fupload%2Fattach%2F2015%2F04%2F22-286657-JfH4wo.jpg",
fit: BoxFit.cover,
)),
],
);
}
}
自定义图标组件
class IconComponet extends StatelessWidget {
Color color = Colors.pink;
double size = 20.0;
IconData icon;
IconComponet(this.icon, this.size, this.color);
@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon, size: this.size, color: Colors.white)));
}
}
Column、Row、Expanded组件
class RowGridLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Container(
width: 1000,
height: 300,
child: Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565001740&di=472870156f1538cdf5a0ce844236faf8&imgtype=0&src=http%3A%2F%2Fwww.tz365.cn%2Fuploads%2Fallimg%2Fc180201%2F151JE424514Z-291T4.jpg",
fit: BoxFit.cover)),
),
SizedBox(height: 10,),
Container(
width: 1060,
height: 200,
color: Colors.lightGreenAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064097&di=30a26282b91ffb18b028f8e573e1b0fd&imgtype=0&src=http%3A%2F%2Fi1.mopimg.cn%2Fimg%2Ftt%2F2018-01%2F677%2F20180107183003683.jpg",
fit: BoxFit.cover,
),
padding: EdgeInsets.all(10)),
flex: 4,
),
Expanded(
child: Container(
height: 200,
child: Column(
children: <Widget>[
Container(
height: 100,
width: 400,
child: Padding(child:Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",fit: BoxFit.cover,),padding: EdgeInsets.fromLTRB(0, 10, 10, 10),),
),
Container(
height: 100,
width: 400,
child: Padding(child:Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",fit: BoxFit.cover,),padding: EdgeInsets.fromLTRB(0, 0, 10, 10),),
),
],
),
),
flex: 2),
]),
),
]);
}
}
层叠组件实现定位Align、Positioned
class StackGridLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: 400.0,
height: 500,
color: Colors.blueGrey,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Icon(Icons.home, size: 40, color: Colors.white),
),
Positioned(
child: Icon(
Icons.search,
size: 60,
color: Colors.orange,
),
top:250,
left:190,
),
Positioned(
child: Icon(
Icons.arrow_back,
size: 60,
color: Colors.pink,
),
left: 10,
bottom: -20,
),
],
),
);
}
}