Flutter Stack/Alignment,Stack
组件的每一个子组件要么定位,要么不定位,定位的子组件是用Positioned组件包裹的。Stack
组件本身包含所有不定位的子组件,子组件根据alignment
属性定位(默认为左上角),然后根据定位的子组件的top、right、bottom和left属性将它们放置在Stack组件上。Stack组件的主要属性如下所示:
采用Alignment
方式布局的示例代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Stack布局示例Alignment',
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = Stack(
// 子组件左上角对齐
alignment: Alignment.topLeft,
children: <Widget>[
// 底部添加一个头像
CircleAvatar(
backgroundImage: AssetImage('images/1.jpeg'),
radius: 100.0,
),
// 上面加一个容器,容器里再放一个文本
Container(
decoration: BoxDecoration(
color: Colors.black38,
),
child: Text(
'我是超级飞侠',
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('Stack层叠布局示例'),
),
body: Center(
child: stack,
),
);
}
}
上述示例代码的视图展现大致如图所示,Stack
子组件间是层叠关系,所以示例中文本会显示在图片之上。
注意 示例中的图片可以使用之前使用的图片资源。
酷客教程相关文章:
评论前必须登录!
注册