如何在颤动行小部件中绘制水平线？答案

【问题标题】：How to draw a horizontal line in flutter row widgets?如何在颤动行小部件中绘制水平线？
【发布时间】：2019-11-19 17:32:45
【问题描述】：

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

Horizontal divider with text in the middle in 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,
                )
              ],
            )
          ],
        )
      ),
    ),

所以，我需要在两个文本下方添加一行，如下图所示-

【问题讨论】：

尝试将分隔线的颜色更改为黑色并删除扩展
我已经编辑了代码，但仍然无法正常工作。请检查@Abbas.M

标签： flutter dart

【解决方案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
            )
          ],
        ),
      )
    ],
  )),
);

【讨论】：

谢谢它有效，我有另一个查询，我的第一个文本在顶部占用了一些空间并且不知道为什么会发生这种情况？
嗯，你的意思是向右缩进了一点？
不，它在顶部占用了一些空间。 mainAxisAlignment：MainAxisAlignment.start，crossAxisAlignment：CrossAxisAlignment.start，我有上面的代码，但是不行
我明白了，您是否为Column 或Row 设置了这些规则？您需要 Row 上的 crossAxisAlignment: CrossAxisAlignment.start, 规则才能将它们置于顶部

【解决方案2】：

这个想法是您将divider 放在一列中，而默认情况下分隔符是水平的，因此它没有足够的空间来占据。如果您将height 属性更改为divider，您可以清楚地看到它。

如果您愿意，您可以将divider 包裹在row 中，或者将divider 作为外部row 的一部分，尽管您可能需要修复其对齐方式并将其包裹在expanded 中。您还可以将列包装在展开中，以便它占据所有足够的空间以显示分隔线。

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

【讨论】：

【解决方案3】：

简单的 Pezy Lemon Squeezy

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

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

【讨论】：