布局
- Row & Column & Center 行列轴布局
- Align 角定位布局
child: Align(
alignment: Alignment.topLeft,
child: Text(
"hello container",
style: TextStyle(fontSize: 30, color: Colors.black),
)),
- Stack & Positioned 绝对定位
当然还有绝对定位的需求,这在css里,使用position:absolute就搞定了,但是在flutter里,需要借助stack+ positioned两个widget一起组合使用
child: Stack(
children: <Widget>[
Image(
image: NetworkImage(
"https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png"),
),
Positioned(
top: 20,
right: 20,
child: Image.network(
"https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg",
width: 100.0,
height: 100.0,
),
)
],
)),
- Flex & Expanded 流式布局
Flex流式布局作为前端同学都熟悉,之前讲过的Row,Column,其实都是继承自Flex,也属于流式布局。
如果轴向不确定,使用Flex,通过修改direction的值设定轴向
如果轴向已确定,使用Row,Column,布局更简洁,更有语义化
import 'package:flutter/material.dart';
class FlexPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("flex page"),
),
body: Flex(
direction: Axis.horizontal,
children: <Widget>[
Container(
width: 300,
height: 100,
color: Colors.red,
),
Expanded(
flex: 1,
child: Container(
height: 100.0,
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Container(
height: 100.0,
color: Colors.green,
),
),
],
),
);
}
}
网友评论