Question

我正在构建一个ListItem，我希望文本位于卡片视图中，该视图占据了整个宽度和正好与文本大小相同的高度。这是我的代码

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Align(
          child: Container(
            width: double.infinity,
            height: 200.0,
            color: Colors.pinkAccent,
          ),
        ),
        Container(
          width: double.infinity,
          color: Colors.deepPurpleAccent,
          child: Align(
              alignment: Alignment.bottomCenter,
              child: Card(
                child: Text(
                  'some text',
                  textAlign: TextAlign.center,
                ),
              )),
        )
      ],
    );
  }

堆栈中有两个小部件，我希望第二个小部件重叠在第一个小部件之上，但只占一小部分。但是，您可以看到，第二个小部件的对齐方式不是在底部而是在顶部。我也尝试将Container和Align切换为彼此的子级，但无济于事。这是生成的代码的屏幕截图

Answer 1

没有类似于“ BottomCenter”（大写字母B）的内容。您应该使用Alignment.bottomCenter。但是您可能需要为Stack设置对齐方式。

Stack(
  alignment: Alignment.bottomCenter,
  children: <Widget>[
    Container(
      width: double.infinity,
      height: 200.0,
      color: Colors.pinkAccent,
    ),
    Container(
      width: double.infinity,
      color: Colors.deepPurpleAccent,
      child: Card(
        child: Text(
          'some text',
          textAlign: TextAlign.center,
        ),
      ),
    )
  ],
)

Flutter Align小部件不对齐

1 个答案: