Flutter Widget 之Positioned

想要任意组合和叠加widget在彼此之上，只要使用Flutter中的Stack Widget，便可轻易实现。

但是如何将这些widget放在Stack中呢？

有几种方法可以做到这一点。

其中一个是使用Positioned Widget。

你知道的，用来定位事物。想一下其实它是不言自明的。

那么Positioned是如何运作的呢？

首先，让我们使用Positioned widget 将widget包装在Stack中。

Stack(
    children: [
        Positioned(
            child: FlutterLogo(),
        ),        
    ],
)

然后，使用top，bottom，right，left，width和height的参数组合，将widget定位在stack中。

Stack(
    children: [
        Positioned(
            top:
            child: FlutterLogo(),
        ),        
    ],
)

在这里，我们看到一个weiget的位置设定：距离顶端25，距离左侧50.

Stack(
    children: [
        Positioned(
            top:25，
            left:50,
            child: FlutterLogo(),
        ),        
    ],
)

在这里，我们将widget设置为距离右侧25，距离底部50

Stack(
    children: [
        Positioned(
            right:25，
            bottom:50,
            child: FlutterLogo(),
        ),        
    ],
)

您可以使用高度和宽度来控制Positioned窗口widget的大小。

Stack(
    children: [
        Positioned(
            right:25，
            bottom:50,
            height:75,
            width:75,
            child: FlutterLogo(),
        ),        
    ],
)

还有最后一个提示。

您可以使用Positioned.fill来使widget填充Stack的空间。

Stack(
    children[
        Positioned.fill(
            child: FLutterLogo(),
        ),
    ],
)

如果想了解有关Positioned的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址