首页 > 建站教程 > APP开发,混合APP >  Flutter笔记53:Stack层叠组件正文

Flutter笔记53:Stack层叠组件

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack层叠组件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack层叠组件'),
        ),
        body: Column(
          children: [
            Container(
              width: 300.0,
              height: 100.0,
              color: Colors.red,
              //层叠组件,层叠顺序:后面的元素覆盖前面的元素
              child: Stack(
                //对齐方式
                //子组件对齐方式:同Container的alignment属性,它指定的是所有子组件的对其方式,所以建议在只有两个子组件的时候使用。如果有三个及以上的子组件时,建议使用Positioned包裹子组件来决定子组件的位置,alignment的可选项有:
                //AlignmentDirectional.topCenter:垂直靠顶部水平居中对齐
                //AlignmentDirectional.topStart:垂直靠顶部水平靠右对齐
                //AlignmentDirectional.centerStart:垂直居中水平靠左对齐
                //AlignmentDirectional.center:垂直和水平居中都对齐
                //AlignmentDirectional.centerEnd:垂直居中水平靠右对齐
                //AlignmentDirectional.bottomStart:垂直靠底部水平靠左对齐
                //AlignmentDirectional.bottomCenter:垂直靠底部水平居中对齐
                //AlignmentDirectional.bottomEnd:垂直靠底部水平靠右对齐
                //AlignmentDirectional(.5,.5) 也可以指定具体偏移量,以整个组件的中心为坐标原点,X,Y偏移量取值范围[-1,1]
                alignment: AlignmentDirectional.center,
                //文字书写方向
                // textDirection: TextDirection.rtl,
                //如何确定没有使用 Position 包裹的子组件的大小,可选值有:
                //StackFit.loose:子组件宽松取值,可以从min到max
                //StackFit.expand:子组件取最大值
                //StackFit.passthrough:不改变子组件的约束条件
                // fit: StackFit.expand,
                //超出部分的处理方式
                // overflow: Overflow.clip,
                children: [
                  Container(
                    color: Colors.green,
                    width: 100.0,
                    height: 50.0,
                  ),
                  Text(
                    'Stack层叠组件',
                    style: TextStyle(
                        letterSpacing: 5.0,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  //相对定位
                  Positioned(
                    left: 10.0,
                    bottom: 30.0,
                    child: Text('Positoned'),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}