如何在颤振行小部件中绘制水平线？

Question

在我的颤振项目中，我已经初始化了一个行。在里面，我在一列中创建了一些文本，然后，我想添加一行，但它没有显示任何内容。出于这个原因，我使用了 Expanded 并遵循了给定的解决方案-

Flutter 中带有文本的水平分隔符？

但他们都没有工作。

这是我的代码输出的图像-

这是我的代码-

Container(
      color:Colors.white,
      child: (
        Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image(
                  height: 100,
                  width: 100,
                  image: NetworkImage("https://www.gstatic.com/webp/gallery/1.jpg"),
                ),
            ),
            Column(
              children: <Widget>[
                Text("Book Name"),
                Text("Author name"),

                Divider(
                  color: Colors.black,
                )
              ],
            )
          ],
        )
      ),
    ),

所以，我需要在两个文本下面一行，并像下图一样显示它-

Answer 1

尝试将您包裹起来Column，Expanded以便Divider知道要占用多少空间。

Container(
  color: Colors.white,
  child: (Row(
    children: <Widget>[
      // ...
      Expanded(
        child: Column(
          children: <Widget>[
            Text("Book Name"),
            Text("Author name"),
            Divider(
              color: Colors.black
            )
          ],
        ),
      )
    ],
  )),
);

Answer 2

简单的柠檬挤汁

很简单，看取一个容器，不要提及它的宽度，因为它会动态地占据空间，然后只给半径的下边框赋予颜色。

Container(
                              child: Text(
                                'Your Text Here',
                              ),
                              decoration: BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(color: Colors.black),
                                ),
                              ),
                            ),

Answer 3

这个想法是，您将其放置divider在一列内，而默认情况下分隔线是水平的，因此它没有足够的空间可占据。如果你改变你的height财产，divider你可以清楚地看到它。

如果您愿意，您可以将其包裹divider在 a 中row，或者制作divider外部的一部分row，但您可能必须修复其对齐方式并将其包裹在expanded. 您还可以将列包裹在扩展中，以便它占据足够的空间来显示分隔线。

我会为你编写代码，但我只有显示内容的部分代码+它应该不会太难。如果您需要更多帮助，请告诉我！