Question

我目前正在学习如何使用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,
        )
      )
    );
  }
}

这是卡片的截图：

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

谢谢！

Answer 1

发生在我身上，但我发现此属性可以解决它：厚度

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

Answer 2

在列中使用 Divider()，在行中使用 VerticalDivider()

Answer 3

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

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

Answer 4

我遇到了同样的问题，但是通过将我的除法器放在 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),
      ),
    ),
  ],
),

Answer 5

如果要为小部件视图画线，请尝试使用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( 
         ....
 ),
)

Answer 6

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

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

Answer 7

水平分隔线

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

垂直分隔线

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

Answer 8

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


            ),
      ),

Flutter divider小部件未显示

8 个答案: