Flutter:如何将文本小部件中心放在屏幕上
Posted
技术标签:
【中文标题】Flutter:如何将文本小部件中心放在屏幕上【英文标题】:Flutter: How can i put the text widget center in screen 【发布时间】:2021-07-31 10:29:30 【问题描述】:我需要将标题'放在中心以适应任何屏幕,我知道我可以调整框的大小以将标题移动到中心,但是当使用不同的设备时,尺寸肯定会改变并成为不同的标题地方。 这是代码:
class NotificationDoctor extends StatelessWidget
TextStyles textStyles = TextStyles.HEADING;
Texts texts;
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0))),
height: 130.h,
child: Padding(
padding: EdgeInsets.only(top: 40.h),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(
right: 15.w,
top: 15.h,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
FlatButton(
child: ArrowIcon(
arrowColor: Color(0xFFEEF4F9),
backgroundColor:
Theme.of(context).primaryColor.withOpacity(.9),
),
onPressed: ()
Navigator.pop(context);
,
),
// SizedBox(
// width: 55,
// ),
Center(
child: Texts(
'Notifications',
style: TextStyles.HEADING,
color: Color(0xFFEEF4F9),
),
),
],
),
),
],
),
),
),
));
【问题讨论】:
【参考方案1】:您只需像这样在中心更改mainAxisAlignment
mainAxisAlignment: MainAxisAlignment.center,
完整代码
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
// SizedBox(
// width: 55,
// ),
Center(
child: Text(
'Notifications',
),
),
],
),
如果您只希望标题居中,则使用 Stack
小部件并将标题小部件包装在 Align
小部件中,如下所示
Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Icon(Icons.arrow_back),
), // icon,
Align(
alignment: Alignment.center,
child: Text(
'Notifications',
),
),
],
)
【讨论】:
没错,但我不想移动箭头,我需要中间的标题和左边的箭头。 现在我想你得到了你想要的输出@Deya Albawati ضياء البواطي【参考方案2】:像这样使用填充
Padding(
padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
child: Container(),
);
阅读更多https://pub.dev/packages/sizer
【讨论】:
以上是关于Flutter:如何将文本小部件中心放在屏幕上的主要内容,如果未能解决你的问题,请参考以下文章