美文网首页
层叠布局 Stack、Positioned

层叠布局 Stack、Positioned

作者: 转移到CSDN名字丹丹的小跟班 | 来源:发表于2021-04-30 16:10 被阅读0次
    介绍

    层叠布局和Web中的绝对定位、Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来(按照代码中声明的顺序)。Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置。

    先简单使用下Stack

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "demo",
          home: Scaffold(
            appBar: AppBar(title: Text("bar")),
            body: HomeContent(),
          ),
        );    
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(child: Stack(
          children: [
            Container(
              height: 300,
              width: 300,
              color: Colors.blue[200],
            ),
            Text("一段文字")
          ],
        ));    
      }
    }
    

    可以发现,正常情况下,当Text和Container组件并排时,文字会出现在盒子的后面,但是使用了stack后,文字与盒子出现在同一区域(其实是文字在盒子上面)。


    image.png
    参数列表
    Stack({
      this.alignment = AlignmentDirectional.topStart,
      this.textDirection,
      this.fit = StackFit.loose,
      this.overflow = Overflow.clip,
      List<Widget> children = const <Widget>[],
    })
    
    • alignment:此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子组件。所谓部分定位,在这里特指没有在某一个轴上定位:leftright为横轴,topbottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位。
    • textDirection:和RowWraptextDirection功能一样,都用于确定alignment对齐的参考系,即:textDirection的值为TextDirection.ltr,则alignmentstart代表左,end代表右,即从左往右的顺序;textDirection的值为TextDirection.rtl,则alignment的start代表右,end代表左,即从右往左的顺序。
    • fit:此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小,StackFit.expand表示扩伸到Stack的大小。
    • overflow:此属性决定如何显示超出Stack显示空间的子组件;值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会。
    Positioned
    const Positioned({
      Key key,
      this.left, 
      this.top,
      this.right,
      this.bottom,
      this.width,
      this.height,
      @required Widget child,
    })
    

    left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定需要定位元素的宽度和高度。注意,Positioned的width、height 和其它地方的意义稍微有点区别,此处用于配合left、top 、right、 bottom来定位组件,举个例子,在水平方向时,你只能指定left、right、width三个属性中的两个,如指定left和width后,right会自动算出(left+width),如果同时指定三个属性则会报错,垂直方向同理。

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "demo",
          home: Scaffold(
            appBar: AppBar(title: Text("bar")),
            body: HomeContent(),
          ),
        );    
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(child: Container(
          width: 300,
          height: 300,
          color: Colors.blue[200],
          child: Stack(
            children: <Widget>[
              Positioned(
                left: 0,
                top: 0,
                child: Icon(Icons.home),
              ),
              Positioned(
                right: 0,
                bottom: 0,
                child: Icon(Icons.home),
              ),
              Positioned(
                left: 150,
                top: 150,
                child: Icon(Icons.home),
              )
            ],
          ),
        ));    
      }
    }
    
    image.png

    注意要考虑元素自身的大小

    Align

    参数列表

    Align({
      Key key,
      this.alignment = Alignment.center,
      this.widthFactor,
      this.heightFactor,
      Widget child,
    })
    
    • alignment : 需要一个AlignmentGeometry类型的值,表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类,它有两个常用的子类:AlignmentFractionalOffset,我们将在下面的示例中详细介绍。
    • widthFactorheightFactor是用于确定Align 组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是Align 组件的宽高。如果值为null,则组件的宽高将会占用尽可能多的空间。
    import 'package:flutter/material.dart';
    
    main(List<String> args) {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "demo",
          home: Scaffold(
            appBar: AppBar(title: Text("bar")),
            body: HomeContent(),
          ),
        );    
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(child: Container(
          width: 300,
          height: 300,
          color: Colors.blue[200],
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment(1, 1),
                child: Icon(Icons.home),
              ),
              Align(
                alignment: Alignment(0, 0),
                child: Icon(Icons.home),
              ),
              Align(
                alignment: Alignment(-1, -1),
                child: Icon(Icons.home),
              )
            ],
          ),
        ));    
      }
    }
    
    image.png

    相关文章

      网友评论

          本文标题:层叠布局 Stack、Positioned

          本文链接:https://www.haomeiwen.com/subject/rlatlltx.html