Question

我想将图像上方的文本对齐到bottomLeft角，但是即使将其对齐到bottomLeft，它也仍然位于topLeft角。因此，请帮助我了解代码中的错误或缺失之处，以实现以下图像文本布局。

我的输出

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 /任何绝对定位小部件将其放置在框中的任何位置。 请注意堆叠顺序是屏幕上的最后一个孩子

Stack小部件将小部件放在彼此之上，而彼此之间仅对父级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),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

如何在抖动中使文本与图像对齐？

1 个答案: