设为首页 收藏本站 662p开源网
开启辅助访问 切换到宽版

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 立即注册 找回密码

安卓教程网

发表于 2019-4-28 16:38:58 | 显示全部楼层 |阅读模式
更多
概述
Stack 组件是一种层叠式布局,即组件覆盖另一个组件,覆盖的顺序取决于在children中放置的顺序,使用场景比如在图片上加上一些文字描述,即将文本Widget覆盖在图片组件,详见下面的小例。
构造函数
  1. Stack({
  2.     Key key,
  3.     this.alignment = AlignmentDirectional.topStart,
  4.     this.textDirection,
  5.     this.fit = StackFit.loose,
  6.     this.overflow = Overflow.clip,
  7.     List<Widget> children = const <Widget>[],
  8.   })
复制代码
  • alignment 子Widgets们的对齐方式
  • textDirection 文本的方向,默认当然是 left-to-right
  • fit 子Widgets的放置方式,默认loose
  • 子Widgets溢出的处理方式
一个简单的叠加效果:

  1. import 'package:flutter/material.dart';

  2. class StackLearn extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return new Scaffold(
  6.       appBar: AppBar(
  7.         title: Text("Stack")
  8.       ),
  9.       // 层叠式布局
  10.       body: Stack(
  11.         // 子Widgets们的对齐方式
  12.         alignment: Alignment(1, 1),
  13.         // 文本的方向,默认当然是 left-to-right
  14.         textDirection: TextDirection.ltr,
  15.         // fit 子Widgets的放置方式,默认loose
  16.         fit: StackFit.loose,
  17.         // 子Widgets溢出的处理方式
  18.         overflow: Overflow.visible,
  19.         children: <Widget>[
  20.           Container(
  21.             width: 100,
  22.             height: 100,
  23.             color: Colors.red,
  24.           ),
  25.           Container(
  26.             width: 90,
  27.             height: 90,
  28.             color: Colors.green,
  29.           ),
  30.           Container(
  31.             width: 80,
  32.             height: 80,
  33.             color: Colors.blue,
  34.           ),
  35.         ],
  36.       ),
  37.     );
  38.   }
  39. }
复制代码
叠加效果如下:

使用实例

  1. class StackEx extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return new Scaffold(
  5.       appBar: AppBar(
  6.         title: Text('Stack Example'),
  7.       ),
  8.       body: Stack(
  9.         alignment: const Alignment(0.6, 0.6),
  10.         children: [
  11.           CircleAvatar(
  12.             backgroundImage: NetworkImage('https://avatars1.githubusercontent.com/u/20992063?s=460&v=4'),
  13.             radius: 100,
  14.           ),
  15.           Container(
  16.             decoration: BoxDecoration(
  17.               color: Colors.black45,
  18.             ),
  19.             child: Text(
  20.               'RuoData',
  21.               style: TextStyle(
  22.                 fontSize: 20,
  23.                 color: Colors.white,
  24.               ),
  25.             ),
  26.           ),
  27.         ],
  28.       )
  29.     );
  30.   }
  31. }
复制代码
实例效果如下

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x

新浪微博达人勋

注册会员

100

积分

31

威望

1

金钱

Rank: 2

积分
100
发表于 2019-4-28 16:41:56 | 显示全部楼层
大人,此事必有蹊跷!
发表于 2019-4-30 17:08:42 | 显示全部楼层
留意一下
发表于 2019-5-8 01:46:18 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊

新浪微博达人勋

注册会员

99

积分

33

威望

0

金钱

Rank: 2

积分
99
发表于 2019-5-9 02:25:23 | 显示全部楼层
这么强,支持楼主,佩服

新浪微博达人勋

注册会员

84

积分

28

威望

0

金钱

Rank: 2

积分
84
发表于 2019-5-10 07:54:46 | 显示全部楼层
回个帖子,下班咯~

新浪微博达人勋

注册会员

93

积分

28

威望

1

金钱

Rank: 2

积分
93
发表于 2019-5-11 23:10:12 | 显示全部楼层
顶顶更健康

新浪微博达人勋

注册会员

109

积分

33

威望

1

金钱

Rank: 2

积分
109
发表于 2019-6-1 14:35:26 | 显示全部楼层
我了个去,顶了

新浪微博达人勋

高级会员

1847

积分

616

威望

0

金钱

Rank: 6Rank: 6

积分
1847
发表于 2019-6-24 20:55:31 | 显示全部楼层
佩服佩服!

新浪微博达人勋

注册会员

57

积分

19

威望

0

金钱

Rank: 2

积分
57
发表于 2019-6-25 02:54:05 | 显示全部楼层
占位编辑
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Archiver|手机版|小黑屋|安卓教程网 ( 粤ICP备12089784号  

GMT+8, 2019-11-15 16:30 , Processed in 0.418269 second(s), 55 queries .

Powered by Discuz X3.1

© 2001-2013 IOS教程网

快速回复 返回顶部 返回列表