Flutter：如何在Stack中定位Widget且不匹配父组件宽高？

哈哈，这个问题我之前也碰到过！你之所以会看到Card被拉伸到整个宽度，是因为你给Positioned同时设置了left: 0和right: 0——这相当于告诉Flutter「把这个组件的左右两边都牢牢贴在父容器的边缘」，它自然就会被拉满宽度啦。

想要实现顶部居中且组件自适应内容宽度的效果，有两种简单的方法：

方法一：用Align组件替代Positioned #

直接在Stack的children里使用Align，通过alignment属性指定顶部居中，这样Card会根据自身内容自动调整宽度，同时保持在顶部居中位置：

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: key,
    appBar: AppBar(
      title: Text("Just a test app"),
    ),
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter,
          child: Card(
            child: Text("A variable sized text"),
          ),
        ),
      ],
    ),
  );
}

方法二：保留Positioned但调整配置 #

如果你一定要用Positioned，可以只设置top: 0，然后把Card放在Center组件里。这样Positioned不会强制拉伸宽度，Center会让Card自动居中显示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: key,
    appBar: AppBar(
      title: Text("Just a test app"),
    ),
    body: Stack(
      children: <Widget>[
        Positioned(
          top: 0,
          child: Center(
            child: Card(
              child: Text("A variable sized text"),
            ),
          ),
        ),
      ],
    ),
  );
}

这两种方法都能完美实现你想要的效果：Card根据文本内容自适应宽度，同时稳稳地居中在Stack的顶部。

内容的提问来源于stack exchange，提问作者Daniel Oliveira