颤动:如何创建一个带有居中单词的行,并在其周围加一条线?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了颤动:如何创建一个带有居中单词的行,并在其周围加一条线?相关的知识,希望对你有一定的参考价值。

试图完成以下效果:

The word OR with 2 horizontal lines around it

这是我的代码:

            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这个词出现在中间,但两个分隔符都被隐藏了? (但是,如果我玩高度你可以看到行的高度增加/减少但仍然没有分隔符。我怎么能得到这个效果?

答案

使用这个小部件,它将完全符合您的要求

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,
        ),
       ),
      ],
    );
   }
  }
另一答案

您可以在两个分隔符上使用Expanded小部件(并在文本上用于一致性目的)

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

enter image description here

以上是关于颤动:如何创建一个带有居中单词的行,并在其周围加一条线?的主要内容,如果未能解决你的问题,请参考以下文章

如何摆脱自定义底部导航栏颤动周围的空白?

如何在 TextView Android 中将渐变设置为文本颜色以及在其周围添加描边?

如何将颤动文本与行中的其他小部件居中

水平居中一个元素,并在其右侧放置另一个元素

如何在颤动中的扩展磁贴内添加带有动态选择复选框的列表视图

如何在以前读过的行中找到一些单词并在输出中删除它 - C++ 中的读/写字符串