Flutter - 如何在图像下方使用带有图像和文本/图标的容器小部件

Posted 2023-02-23

【中文标题】Flutter - 如何在图像下方使用带有图像和文本/图标的容器小部件

【英文标题】：Flutter - How to use container widget with image and text/icons below image

【发布时间】：2019-04-01 20:20:58

【问题描述】：

我在尝试在颤动的容器中创建图像和该图像下方的文本/图标时遇到了一些问题。我有什么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,
      ),
    ),
  );

【问题讨论】：

您能否添加一张您希望屏幕外观的图片？我有一些想法，但需要准确了解您的目标外观和感觉

刚刚对原问题做了更新

【参考方案1】：

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

它告诉列小部件占用空间需要什么，但仅此而已。任何 uncertainty 大小不适用于mainAxisSize: MainAxisSize.min，并可能导致 ui error 大小未定义。

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

 @override
Widget build (BuildContext context) 
return Scaffold(
  appBar: new AppBar(
    title: new Text("Csd"),
  ),
  body: Column(
    children: <Widget>[
      Container(
        height: 150.0,
        margin: const EdgeInsets.symmetric(
          vertical: 16.0,
          horizontal: 24.0,
        ),
        child: new Stack(
          children: <Widget>[
            eventCardContent,
            userThumbnail,
          ],
        ),
      ),
      new Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              new Column(
                children: <Widget>[
                  Text("SEP"),
                  Text("30"),
                ],
              ),
              Expanded(
                 child:new Column(
                   children: <Widget>[
                     new Text("title"),
                     new Text("Sub title"),
                     new Text("Second Sub Title"),
                   ],
                 )
              )
            ],
          ),

        ],
      )
    ],
  ),
);

【讨论】：

这并不是我想要达到的目标，我对问题进行了更新以澄清。