Question

我想实现以下目标

我能达到的目标

这是我的代码

return Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.orange,
              width: 4,
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Icon(Icons.alarm),
                      SizedBox(
                        width: 2,
                      ),
                      Text(
                        "Starts",
                        style:
                            TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      Text(
                        studentClassesData.classStarttime,
                        style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      Text(
                        "to",
                        style:
                            TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      Text(
                        studentClassesData.classEndtime,
                        style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      studentClassesData.subject,
                      style: TextStyle(
                          fontFamily: "BarlowBold", fontSize: 12, color: blue),
                    ),
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundImage:
                            NetworkImage(studentClassesData.facultyImage),
                        child: Image.asset("images/round_only.webp"),
                      ),
                      SizedBox(width: 5,),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "Faculty",
                              style: TextStyle(fontFamily: "KohinoorDemi"),
                            ),
                          ),
                          SizedBox(
                            height: 3,
                          ),
                          Text(
                            studentClassesData.faculty,
                            style: TextStyle(fontFamily: "BarlowBold"),
                          ),
                        ],
                      )
                    ],
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Row(
                    children: <Widget>[
                      Icon(Icons.business),
                      Column(
                        children: <Widget>[
                          Text(
                            "Floor/Room",
                            style: TextStyle(fontFamily: "KohinoorDemi"),
                          ),
                          SizedBox(
                            height: 3,
                          ),
                          Text(
                            "${studentClassesData.floor}/${studentClassesData.room}",
                            style: TextStyle(fontFamily: "BarlowBold"),
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),
            )
          ],
        ));

我无法获得一开始具有淡黄色的视图以占据与Row相同的高度的视图。如您在上面的代码中看到的，我使用了Container，我知道我可以给容器一个高度，但是我不想给容器一个固定的高度，因为高度可能会随数据而变化来自api。

Answer 1

您需要使用-var foo = { bar: function() { return this.baz; }, baz: 1 }; var a = (function(){ console.log(this.constructor.name); // Window return typeof arguments[0](); })(foo.bar.bind(foo)); console.log(a);来获得想要的东西。

工作代码（带有虚拟值）：

IntrinsicHeight

输出：我没有使用过的字体，因此UI看起来与您的不同。但这完成了工作。

Answer 2

您可以通过将Card包裹在SizedBox中来实现所需高度。在这种情况下，您不需要对Container的任何高度进行硬编码，Container会扩展为与Row的高度匹配。这是简单的示例：

SizedBox(
  height: 100,
  child: Card(
    color: Colors.green,
    child: Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          width: 100, // no need to set any height, it will automatically fill to match row
        )
      ],
    ),
  ),
);

如何使容器拉伸以占据与行相同的高度？

2 个答案: