颤振分隔器小部件未出现答案

【问题标题】：Flutter divider widget not appearing颤振分隔器小部件未出现
【发布时间】：2018-08-11 20:06:11
【问题描述】：

我目前正在学习如何使用 Flutter SDK 和 Android Studio 构建应用程序。我的问题是我需要在“管理”文本和卡片的其余部分之间添加一个分隔线小部件，但正如您在下面的屏幕截图中看到的那样，分隔线没有显示。我尝试更改大小（在这种情况下，两个文本之间的空间只会增加）并且我尝试设置颜色以查看它在我的手机上是否默认为透明。没有任何效果！

这是我的卡片小部件状态代码：

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,
        )
      )
    );
  }
}

这是卡片的截图：

还有： 有什么办法可以从 Divider 增加实际线的大小？（不仅仅是间距）

谢谢！

【问题讨论】：

标签： flutter

【解决方案1】：

您可以删除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")
        ],
      ),
    ),
  );
}

要制作自定义分隔符，您可以检查Divider 的实现并对其进行调整。例如。将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,
    ),
  ),
)

【讨论】：

哦，我明白了！谢谢，我对飞镖很陌生，并且直接来自 Android。其中一些概念对我来说不太容易掌握。
如果您需要那里的行小部件，另一种为 Divider 类提供列宽的方法是用类似 Expanded 的东西包装 Column 小部件 - 然后您的代码就可以工作了。

【解决方案2】：

它发生在我身上，但我发现这个属性解决了它：厚度

 child: Divider(
                color: Colors.teal.shade100,
                thickness: 1.0,
              ),

【讨论】：

【解决方案3】：

Container(
           decoration: BoxDecoration(
             border: Border(
               bottom: BorderSide(color: Colors.lightGreen,width: 3.0),
             ),
           ),
         )

您可以使用自定义容器来代替分隔器...

【讨论】：

【解决方案4】：

我遇到了同样的问题，但是通过将我的 Divider 放入 Expanded 小部件解决了我的问题。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Divider(
        thickness: 1,
        color: Color(0xff818181),
      ),
    ),
    SizedBox(width: 10),
    Text(
      'Login using Social Media',
      style: TextStyle(color: Color(0xff818181), fontWeight: FontWeight.w500),
    ),
    SizedBox(width: 10),
    Expanded(
      child: Divider(
        thickness: 1,
        color: Color(0xff818181),
      ),
    ),
  ],
),

【讨论】：

【解决方案5】：

在 Column 中使用 Divider()，在 Row 中使用 VerticalDivider()

【讨论】：

【解决方案6】：

如果您想为小部件视图画线，请尝试使用 BoxDecoration，如下例所示

child: new Container(
  decoration: new BoxDecoration(
   border: Border(
    top: BorderSide(width: 1.0, color: Colors.grey),
    left: BorderSide(width: 1.0, color: Colors.grey),
    right: BorderSide(width: 1.0, color: Colors.grey),
    bottom: BorderSide(width: 1.0, color: Colors.grey),),
 );

 child: new Row( 
         ....
 ),
)

【讨论】：

【解决方案7】：

 Container(
                    width: 200,
                    child: Divider(
                      thickness: 10,
                      color: Colors.red,
                    ),
                  ),

or 
 Expanded(
                    child: Divider(
                      thickness: 10,
                      color: Colors.red,
                    ),
                  ),

【讨论】：

【解决方案8】：

水平分隔线

Container(
  width: double.infinity,
  height: 2, // Thickness
  color: Colors.grey,
)

垂直分隔线

Container(
  width: 2, // Thickness
  height: double.infinity,
  color: Colors.grey,
)

【讨论】：

【解决方案9】：

最近我必须归档具有圆角的分隔线。但如果我使用带边框的容器，它不会给出准确的输出。所以如果你想要圆角，你可以使用这个代码。

ClipRRect(
                  borderRadius: BorderRadius.circular(6.33.r),
                  child: Container(
                    width: 100.w,
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                            color: Color.fromRGBO(196, 196, 196, 0.6),
                            width: 5.0.w),
                      ),
                    ),
                  ),
                ),

【讨论】：

【解决方案10】：

 Padding(
        padding: const EdgeInsets.only(right:20),
            child:Divider(
              color: Color(0xfff8a9c5),
              thickness: 2,


            ),
      ),

【讨论】：

【解决方案11】：

只要你想用这个功能就可以了

 Divider verticalDivider() {
   return Divider(
      height: 2,
      color: Colors.greenAccent,
    );
  }

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review