前端开发_6-Flutter-组件学习2
目录
前言
一、10 Flutter 页面布局 Paddiing Row Column Expanded
一、Column
(new) Column Column({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline,
List<Widget> children = const <Widget>[],
})
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),
],
),
二、Row
(new) Row Row({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline,
List<Widget> children = const <Widget>[],
})
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),
],
),
三、Expanded
(new) Expanded Expanded({
Key? key,
int flex = 1,
required Widget child,
})
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover),
)
),
Row(
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.search,color: Colors.blue)
),
Expanded(
flex: 2,
child: IconContainer(Icons.home,color: Colors.orange),
),
Expanded(
flex: 1,
child: IconContainer(Icons.select_all,color: Colors.red),
),
],
);
四、SizedBox
(new) SizedBox SizedBox({
Key? key,
double? width,
double? height,
Widget? child,
})
SizedBox(width: 10),
五、Padding
(new) Padding Padding({
Key? key,
required EdgeInsetsGeometry padding,
Widget? child,
})
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover),
),
六、自定义按钮组件
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IconContainer(Icons.search,color: Colors.black);
}
}
class IconContainer extends StatelessWidget{
//定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性
Color? color=Colors.red;
double? size=32.0;
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)
),
);
}
}
二、 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局
一、Stack
(new) Stack Stack({
Key? key,
AlignmentGeometry alignment = AlignmentDirectional.topStart,
TextDirection? textDirection,
StackFit fit = StackFit.loose,
Overflow overflow = Overflow.clip,
Clip clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
})
Center(
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Container(
height: 400,
width: 300,
color: Colors.red,
),
Text('我是一个文本',style: TextStyle(
fontSize: 40,
color: Colors.white
))
],
),
);
二、Align
(new) Align Align({
Key? key,
AlignmentGeometry alignment = Alignment.center,
double? widthFactor,
double? heightFactor,
Widget? child,
})
return Center(
child: Container(
height: 400,
width: 300,
color: Colors.red,
child: Stack(
// alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment(1,-0.2),
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search,size: 30,color: Colors.white),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
)
],
),
),
);
三、Positioned
Center(
child: Container(
height: 400,
width: 300,
color: Colors.red,
child: Stack(
// alignment: Alignment.center,
children: <Widget>[
Positioned(
// left: 10,
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Positioned(
bottom: 0,
left: 100,
child: Icon(Icons.search,size: 30,color: Colors.white),
),
Positioned(
right: 0,
child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
)
],
),
),
);
三、 AspectRatio、Card卡片组件、卡片图文列表
一、AspectRatio
(new) AspectRatio AspectRatio({
Key? key,
required double aspectRatio,
Widget? child,
})
AspectRatio(
aspectRatio: 20/9,
child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
),
AspectRatio(
aspectRatio: 2.0/1.0,
child: Container(
color: Colors.red,
),
),
二、Card
(new) Card Card({
Key? key,
Color? color,
Color? shadowColor,
double? elevation,
ShapeBorder? shape,
bool borderOnForeground = true,
EdgeInsetsGeometry? margin,
Clip? clipBehavior,
Widget? child,
bool semanticContainer = true,
})
return ListView(
children: listData.map((value) {
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
value["imageUrl"],
fit: BoxFit.cover,
),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"])),
title: Text(value["title"]),
subtitle: Text(value["title"],
maxLines: 1, overflow: TextOverflow.ellipsis),
)
],
),
);
}).toList(),
);
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title:Text("张三",style: TextStyle(fontSize: 28)) ,
subtitle: Text("高级工程师"),
),
ListTile(
title:Text("电话：xxxxx") ,
),
ListTile(
title:Text("地址：xxxxxx") ,
)
],
),
),Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title:Text("李四",style: TextStyle(fontSize: 28)) ,
subtitle: Text("高级工程师"),
),
ListTile(
title:Text("电话：xxxxx") ,
),
ListTile(
title:Text("地址：xxxxxx") ,
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title:Text("王五",style: TextStyle(fontSize: 28)) ,
subtitle: Text("高级工程师"),
),
ListTile(
title:Text("电话：xxxxx") ,
),
ListTile(
title:Text("地址：xxxxxx") ,
)
],
),
)
],
);
四、 Wrap组件
一、Wrap
(new) Wrap Wrap({
Key? key,
Axis direction = Axis.horizontal,
WrapAlignment alignment = WrapAlignment.start,
double spacing = 0.0,
WrapAlignment runAlignment = WrapAlignment.start,
double runSpacing = 0.0,
WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
Clip clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
})
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
runSpacing: 10,
// direction: Axis.vertical,
// alignment:WrapAlignment.spaceEvenly,
// runAlignment: WrapAlignment.center,
children: const <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
],
);
}
class MyButton extends StatelessWidget {
final String text;
const MyButton(this.text, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// Flutter 2.x以后新增了一些按钮组件 可以使用ElevatedButton替代RaisedButton，也可以继续使用RaisedButton
return ElevatedButton(child: Text(text), onPressed: () {});
}
}
