Flutter Align小部件未对齐

问题描述 投票:0回答:1

我正在构建一个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切换为彼此的子级,但无济于事。这是生成的代码的屏幕截图

Result

flutter flutter-layout
1个回答
0
投票

没有类似于“ 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,
        ),
      ),
    )
  ],
)
© www.soinside.com 2019 - 2024. All rights reserved.