Flutter基礎-012-Stack絕對佈局

天色將變發表於2021-03-01
Flutter

Stack與Positioned配合使用，可以用於從left top bottom right等方面指定子widget的位置，類似於Android中的FrameLayout，絕對佈局。

Stack屬性

Stack屬性設定了children中的widget預設遵守的規範，如果在Positioned中沒有指定水平或垂直方向的位置，那麼使用Stack中規定的。

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,根據textDiretion確定具體的排序
    this.textDirection,// 子widget的排列方向，是ltr 還是rtl 
    this.fit = StackFit.loose,// 沒有使用Positioned時，子widget大小，loose表示使用widget自身大小，expand表示擴充套件到stack大小
    this.overflow = Overflow.clip,// 超出螢幕部分的處理方式
    List<Widget> children = const <Widget>[],
  }) 
複製程式碼
Positioned

水平方向，使用left width right控制寬度和位置，但三個屬性中最多設定兩個。 垂直方向，使用top height bottom控制高度和位置，但三個屬性中最多設定兩個，另一個推算得出。

const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  }) 
複製程式碼

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
        child:
        Stack(
          alignment: AlignmentDirectional.centerStart,//如果Positioned沒有指定水平和垂直的位置，那麼Positioned的widget使用此屬性
//          alignment: AlignmentDirectional.topStart,
//          alignment: AlignmentDirectional.topCenter,
//          alignment: AlignmentDirectional.topEnd,
//          alignment: AlignmentDirectional.center,
//          alignment: AlignmentDirectional.centerEnd,
//          alignment: AlignmentDirectional.bottomStart,
//          alignment: AlignmentDirectional.bottomCenter,
//          alignment: AlignmentDirectional.bottomEnd,
          textDirection: TextDirection.rtl,
//          fit: StackFit.loose,//
          fit: StackFit.expand,//
//          overflow: Overflow.clip,// 子widget 超出螢幕部分，clip不顯示
          overflow: Overflow.visible,// 子widget 超出螢幕部分，visible實際效果也是不顯示
          children: <Widget>[
            //沒有Positioned，因此使用父類的fit屬性
            Container(
              child: Text("444",style: TextStyle(backgroundColor: Colors.orange),),
              color: Colors.grey,
            ),
            Positioned(
              child: Text("777",style: TextStyle(backgroundColor: Colors.orange),),
              left: 39,
            ),
            Positioned(
              left: 10,
              top: 10,
              child: Text("1111"),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text("222"),
            ),
            Positioned(
              left: 10,
              width: 100,
              child: Text("333",style: TextStyle(backgroundColor: Colors.green),),
            ),

            Positioned(
              right: -20,
              child: Text("超出了螢幕1234567890abcde",style: TextStyle(backgroundColor: Colors.red),),
            ),
          ],
        ),
      ),
    );
  }
}
複製程式碼

相關文章