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

Question

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

81

在我的Flutter项目中，我初始化了一个Row。在其中，我创建了一些列中的文本，并且之后我想添加一条线但是它没有显示任何东西。我已经使用了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,
                )
              ],
            )
          ],
        )
      ),
    ),

因此，我需要在这两段文本下面画一条线，并像下图一样显示-

- S. M. Asif

尝试将分隔符的颜色更改为黑色并删除扩展。 - Abbas.M

我已经编辑了代码，但仍然无法工作。请检查@Abbas.M - S. M. Asif

5个回答

6

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

如果您愿意，您可以将您的“divider”包装在一个“row”中，或者将其作为外部的“row”一部分，虽然您可能需要修复它的对齐方式并将其包裹在“expanded”中。您还可以将列包装在一个“expanded”中，以便它占据足够的空间让分隔符出现。

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

- Abbas.M

6

简单易懂

很简单，拿一个容器，不要指定它的宽度，因为它会动态占据空间，然后只给底部边框设置颜色和圆角。

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

- Shehzad Ahmad

2

如果您知道需要的分隔线长度，可以使用SizedBox将Divider包装起来，并指定SizedBox属性中的线宽。请保留HTML标签。

- Kenart

0

使用：
Divider(),

来源：flutter.dev

- Hasan koç

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sven · Accepted Answer

尝试用Expanded包装你的Column，这样Divider就知道需要占据多少空间。

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