颤动:如何创建一个带有居中单词的行,并在其周围加一条线?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了颤动:如何创建一个带有居中单词的行,并在其周围加一条线?相关的知识,希望对你有一定的参考价值。
试图完成以下效果:
这是我的代码:
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,
))
以上是关于颤动:如何创建一个带有居中单词的行,并在其周围加一条线?的主要内容,如果未能解决你的问题,请参考以下文章