Flutter移动之旅-Day2
Column垂直布局
- 源代码
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "ccatom",
home: Scaffold(
//应用栏
appBar: AppBar(
title: Text("使用Column垂直布局"),
),
body: Column(
//主轴对齐方式:居中
//如果用column,那么垂直就是主轴
mainAxisAlignment: MainAxisAlignment.center,
//幅轴对齐方式:右对齐
//幅轴与主轴垂直
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Center(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
//使用Expanded灵活布局
Expanded(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
Center(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
// Center(child:Text('I love coding'))
],
),
),
);
}
}
- 效果
Row水平布局
- 源代码
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "ccatom",
home: Scaffold(
//应用栏
appBar: AppBar(
title: Text("使用Row水平布局"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Center(
child: RaisedButton(
child: Text("“漂浮”按钮"),
onPressed: (){},
),
),
Center(
child:RaisedButton(
child: Text("“漂浮”按钮"),
onPressed: (){},
)
),
Center(
child: RaisedButton(
child: Text("“漂浮”按钮"),
onPressed: (){},
),
)
],
),
),
);
}
}
- 效果
Stack层叠布局
- 源代码
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "ccatom",
home: Scaffold(
//应用栏
appBar: AppBar(
title: Text("Stack层叠布局"),
),
body: Stack(
//居中对齐
alignment: Alignment.center,
//添加层叠部件
children: <Widget>[
//最底层的部件
//创建一个圆角头像
Center(
child: new CircleAvatar(
radius: 150.0,
backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ图片20200108211847.jpg"),
),
),
//在圆角头像上面添加容器
Container(
child: Text(
"阿腾木的小世界",
style: TextStyle(
color: Colors.white,
fontSize: 30,
//字间距
letterSpacing: 10,
//添加阴影
shadows: [Shadow(color: Colors.blue,blurRadius: 10)]
),
),
),
//使用Positioned组件进行多组件布局
Positioned(
//距离层叠组件下边的距离:240
bottom: 240,
child: Text(
"ccatom.com",
style: TextStyle(
color: Colors.white,
fontSize: 20,
shadows: [Shadow(color: Colors.blue,blurRadius: 10)]
),
),
)
],
),
),
);
}
}
- 效果
Card卡片组件布局
- 源代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context){
//单独声明Card组件
Card card = new Card(
//添加垂直布局
child: Column(
children: <Widget>[
//用ListTile实现内部列表
ListTile(
//添加首部图片
leading: CircleAvatar(
backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/head.jpg"),
),
//主标题
title: Text("张三"),
//副标题
subtitle: Text("这就是flutter吗,i了i了"),
),
//添加分隔线
Divider(thickness: 0.5),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ图片20200108211847.jpg"),
),
title: Text("李四"),
subtitle: Text("不愧是你"),
),
Divider(),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/20200123235514.jpg"),
),
title: Text("王五"),
subtitle: Text("珍爱生命,远离瘟疫"),
),
Divider(),
],
),
);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("使用Card卡片布局"),
),
body: Center(
child: card,
),
),
);
}
}
- 效果