Question

我将文字覆盖在图像上，并且试图将文字放在图像的底部。我尝试使用alignment: Alignment.bottom的不同变体，但是如果我添加end，它将文本放在图像的最右边，而不是底部：

               return new Column(
                  children: <Widget>[
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                              new Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.pink[250],
                                    width: 7,
                                  ),
                                  borderRadius: BorderRadius.circular(9),
                                ),
                                  child: new Container(
                                    child: new Image.asset(dateIdeas[index]['Image']),
                                  ),
                              ),
                              Container(
                                alignment: Alignment.bottomCenter,
                                child: Text(dateIdeas[index]['Description'],
                                    style: TextStyle(
                                      fontSize: 30,
                                      color: Colors.white,
                                      fontFamily: 'IndieFlower',
                                    )),
                              ),
                          ],
                        ),
                      ],
                    )
                  ],
                );

我不确定我是否只是在这里想念东西。

Answer 1

问题在于您文本的容器宽度和高度与图像的宽度和高度不同。由于您使用的是Stack，因此请使用Positioned.fill小部件在图像上创建一个与其大小相同的容器。

类似的东西：

Stack(
  children: <Widget>[
    Container(), // Your image here
    Positioned.fill(
      child: Container(), // Your text with alignment here
    ),
  ]
),

Answer 2

这是一个示例应用程序，用于将“ Hello”写到图像底部：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Container(
          width: 200,
          height: 200,
          child: Stack(
          children: <Widget>[
          Positioned.fill(
            child: Image.network("https://images.unsplash.com/photo-1586924234039-d0f3b6dcab92?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80")
          ),
          Positioned.fill(
            child: Container(
            alignment: Alignment.bottomCenter,
            child: Text("Hello", style: TextStyle(color: Colors.white))
          ),),
        ]),),),
      ),
    );
  }
}

文本对齐底部将文本保持在屏幕顶部

2 个答案: