首页 文章

Flutter分隔器小部件没有出现

提问于
浏览 次
1

我目前正在学习如何使用Flutter SDK和Android Studio构建应用程序 . 我的问题是我需要在“管理”文本和卡片的其余部分之间添加一个Divider小部件，但正如您在下面的屏幕截图中看到的那样，分隔符没有显示出来 . 我试过改变大小（在这种情况下，两个文本之间的空间只是增加）我已经尝试设置颜色，看看它是否在我的手机上默认为透明 . 什么都行不通！

这是我的Card Widget State的代码：

class BBSCardState extends State<BBSCard>{
  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
      child: new Card(
        child: new Row(
          children: <Widget>[
            new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
                  child: new Text("Administrative", style: new TextStyle(color: new Color.fromARGB(255, 117, 117, 117), fontSize: 32.0, fontWeight: FontWeight.bold)),
                ),
                new Divider(),
                new Text("text")
              ],
            ),
          ],
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
        )
      )
    );
  }
}

这是卡片的截图：

The divider does not appear between the two texts

Also: 有没有办法增加Divider实际线的大小？ （不只是间距）

谢谢！

flutter

1 回答

  • 2

    您可以删除 Row ，然后 Column 将占用所有可用空间， Divider 将具有宽度 .

    @override
Widget build(BuildContext context) {
  return new Padding(
    padding: const EdgeInsets.only(
        top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
    child: new Card(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
            child: new Text("Administrative",
                style: new TextStyle(
                    color: new Color.fromARGB(255, 117, 117, 117),
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold)),
          ),
          new Divider(
            color: Colors.red,
          ),
          new Text("text")
        ],
      ),
    ),
  );
}

    Result

    要制作自定义分隔符，您可以检查 Divider 的实现并进行调整 . 例如 . 用_13替换 Divider

    new SizedBox(
  height: 10.0,
  child: new Center(
    child: new Container(
      margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
      height: 5.0,
      color: Colors.red,
    ),
  ),
)

    CustomDivider

    回复于

相关问题