Flutter 2.11 页面布局 Stack层叠组件 Stack与Align , Stack与Positioned实现定位布局

Stack 一个盒子内多个组件 显示不同的位置
Stack组件会把内部的组件堆在一起显示
使用Stack (alignment) 控制内部组件的位置 Alignment 自己定义位置 [-1,-1] ~ [1,1]

当Stack内有多个组件的位置需要定位的时候
Stack结合 align 控制每个子控件的显示位置

return Center(
      child:  Container(
          width: 400,
          height: 200,
          color: Colors.red,
          child: Stack(
            children: [
         Align(
          child:Text('text'),
          alignment: Alignment(-1, -1),
        ),
         Align(
          child:Text('text'),
          alignment: Alignment(1, 1),
        ),
         Align(
          child:Text('text'),
          alignment: Alignment(0, 0),
        ),

            ],
          ),
        ),
    );


Stack结合 position 控制每个子控件的显示位置
(position 距左 上 left bottom…right…)

Center 居中组件

你可能感兴趣的:(Flutter 2.11 页面布局 Stack层叠组件 Stack与Align , Stack与Positioned实现定位布局)