dart - Flutter:如何创建一个居中单词的行,周围有一条线?
问题描述
试图完成以下效果:
这是我的代码:
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 出现在中间,但两个 Dividers 都隐藏了?(但是,如果我玩高度,你可以看到行的高度增加/减少但仍然没有分隔线。我怎样才能得到这个效果?
解决方案
使用这个小部件,它会做你想要的
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,
),
),
],
);
}
}
推荐阅读
- vue.js - 在 Vuetify v-text-field 上禁用自动完成
- routes - 此处的 routeRequestParams 映射
- javascript - Tabulator js 和 Chrome:单元格中图标旁边的点
- javascript - 当我们返回页面时,formik 会阻止默认值
- javascript - 方法内部的属性显示未定义但在方法之外工作。如何解决?
- javascript - 使用 javascript 定期向 html 添加不同的文本
- flutter - 使用persistent_bottom_nav_bar 导航新屏幕时未选择的bottomNavBarItem
- swiftui - 是否可以在 WindowsGroup 旁边的 SwiftUI iOS 应用程序中使用 DocumentGroup?
- python - 当 col 使用 pandas 在数据框中具有日期格式时,将所有日期数据类型列动态转换为 YYYY-MM-DD 格式
- c# - 在 Windows 窗体 C# 中“包含”一个类