Flutter：如何创建一个居中单词的行，周围有一条线？答案

【问题标题】：Flutter: How to create a row with a centered word with a line around it?Flutter：如何创建一个居中单词的行，周围有一条线？
【发布时间】：2018-12-31 13:17:21
【问题描述】：

试图达到以下效果：

这是我的代码：

            new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  const Divider(
                      color: const Color(0xFF000000),
                      height: 20
                  ),
                  new Text(
                    "OR",
                    style: new TextStyle(
                      fontSize: 20.0,
                      color: const Color(0xFF000000),
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                  const Divider(
                      color: const Color(0xFF000000),
                      height: 20
                  ),
                ]),

OR 一词出现在中间，但两个分隔线都隐藏了？（但是，如果我玩高度，你可以看到行的高度增加/减少，但仍然没有分隔线。我怎样才能得到这个效果？

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

使用这个小部件，它会做你想做的事

class OrComponent extends StatelessWidget {


   @override
   Widget build(BuildContext context) {

      return Row(
         children: <Widget>[
           Expanded(
             child: Container(
               height: 2.0,
               color: AppColor.lighterGrey,
             ),
           ),
        Container(
           margin: EdgeInsets.symmetric(horizontal: 3.0),
           child: Text("OR",style:TextStyle(color:Colors.black)),
        ),
        Expanded(
           child: Container(
             height: 2.0,
             color: Colors.grey,
        ),
       ),
      ],
    );
   }
  }

【讨论】：

【解决方案2】：

您可以在两个 Dividers 上使用 Expanded 小部件（以及在 Text 上使用以保持连贯性）

Expanded(
  flex: 1,
  child: Divider(
      color: const Color(0xFF000000),
              height: 2,
 )),
 Expanded(
      flex: 0,
       child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 15.0),
                  child: Text(
                    "OR",
                    style: new TextStyle(
                      fontSize: 20.0,
                      color: const Color(0xFF000000),
                      fontWeight: FontWeight.w200,
                    ),
 ))),
 Expanded(
      flex: 1,
      child: Divider(
                color: const Color(0xFF000000),
                height: 2,
 ))

【讨论】：

完美，我只需要将它包装成一个 Row 就可以了。