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'), ) ], ), ) ], ), ), ); } }