Flutter-如何將容器小部件與圖像以及圖像下方的文本/圖標一起使用

Question

嘗試在顫動的容器內創建圖像和該圖像下方的文本/圖標時遇到問題。 到目前為止 ，我想在圖像下方包括三行小部件，每行將具有一個文本小部件或一個圖標小部件，但是每當我嘗試執行此操作時，容器將僅采用文本/圖標小部件的形狀，圖像將消失。 在這種情況下，我使用的是錯誤的小部件嗎？ 我想在此圖片的底部加上標題，日期和位置，與此類似。

我的代碼：

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，就可以解決您的問題。

它告訴列窗口小部件要占用任何空間，但不要多於此。 大小的任何不確定性都不能與mainAxisSize: MainAxisSize.min並且可能導致大小不確定的ui 錯誤 。

以下代碼可能會對您有所幫助。

 @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"),
                   ],
                 )
              )
            ],
          ),

        ],
      )
    ],
  ),
);
}