试图实现以下效果:
这是我的代码:
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出现在中间,但两个分隔线都被隐藏了? (但是,如果我使用高度,则可以看到行的高度增加/减少,但仍然没有分隔线。如何获得此效果?
答案 0 :(得分: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,
),
),
],
);
}
}
答案 1 :(得分:1)
您可以在两个分隔符上使用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,
))