Question

我在尝试在颤动的容器中创建图像和该图像下方的文本/图标时遇到了一些问题。 far这样的东西，我想在图像下包括三行小部件，每行将有一个文本小部件或一个图标小部件，但是每当我尝试执行此操作时，容器都将采用文本的形状/图标小部件，图像将消失。在这种情况下，我使用的是错误的小部件吗？我希望有类似this的内容，请注意图片的底部带有标题，日期和位置。

我的代码：

class EventRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150.0,
      margin: const EdgeInsets.symmetric(
        vertical: 16.0,
        horizontal: 24.0,
      ),
      child: new Stack(
        children: <Widget>[
          eventCardContent,
          userThumbnail,
        ],
      ),
    );
  }

  final userThumbnail = new Container(
    margin: EdgeInsets.symmetric(vertical: 16.0),
    alignment: FractionalOffset.centerLeft,
    child: CircleAvatar(
      backgroundImage: AssetImage("assets/images/letter_u.png"),
      backgroundColor: Colors.white,
      maxRadius: 40.0,
    ),
  );

  final eventCardContent = new Container(
    margin: new EdgeInsets.only(left: 46.0),
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: new Color(0xFFFFFFFF),
      borderRadius: new BorderRadius.circular(8.0),
      image: DecorationImage(
        image: AssetImage("assets/images/moon_pumpkin.jpeg"),
        fit: BoxFit.fill,
      ),
    ),
  );

Answer 1

您只需要用Column包装userThumbnail容器并使用属性mainAxisSize：MainAxisSize.min，就可以解决您的问题。

以下代码可能会对您有所帮助。

{"myName" : {"id" : 4} }

Flutter-如何将容器小部件与图像以及图像下方的文本/图标一起使用

1 个答案: