flutter - 如何在 flutter 中将文本与图像对齐？

Question

我想将图像上的文本与左下角对齐，但即使将其与左下角对齐，它仍然停留在左上角。因此，请帮助我了解我的代码中有什么问题或缺失，以实现以下图像文本布局。

我的输出

SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: <Widget>[
                Container(
                  width: 300,
                  height: 220,
                  alignment: Alignment.bottomLeft,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/image1.png'),
                        fit: BoxFit.cover),
                  ),
                  child: Column(
                    children: <Widget>[
                      Text(
                        "Jerusalem",
                        style: TextStyle(
                            fontFamily: 'AirbnbCerealBold',
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text("1,243 Place", style: TextStyle(
                          fontFamily: 'AirbnbCerealBook',
                          fontSize: 14,
                          color: Colors.white),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: 300,
                  height: 220,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/image3.png'),
                        fit: BoxFit.cover),
                  ),
                ),
              ],
            ),
          ),

Answer 1

使用固定高度和宽度的堆栈，然后使用 Positioned/Align/any absolute positioning widgets 放置在框中的任何位置。 注意堆栈顺序是最后一个 child 第一个出现在屏幕上

Stack widget 会将 widget 放置在彼此之上，彼此之间没有响应，仅对父 Stack - 就像 CSS/HTML 中的绝对子级到相对父级

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: <Widget>[
      Container(
        width: 300,
        height: 220,
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image(
              fit: BoxFit.cover,
              image: AssetImage('assets/image1.png'),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              child: Column(
                children: <Widget>[
                  Text(
                    "Jerusalem",
                    style: TextStyle(
                        fontFamily: 'AirbnbCerealBold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  Text(
                    "1,243 Place",
                    style: TextStyle(
                        fontFamily: 'AirbnbCerealBook',
                        fontSize: 14,
                        color: Colors.white),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)