尝试实现如下效果:
这是我的代码:
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 出现在中间但两个 Divider 都被隐藏了? (但是,如果我玩高度你可以看到行的高度增加/减少但仍然没有分隔线。我怎样才能得到这种效果?
最佳答案
使用这个小部件,它会做你想做的事
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,
),
),
],
);
}
}
关于dart - Flutter:如何创建一行居中的单词,周围有一条线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53987953/