在AppBar中居中显示返回按钮。
在AppBar中居中显示返回按钮。
我将文本和图标存储在AppBar的标题中心显示。在过渡期间，出现的返回按钮占据了一部分空间，导致我的居中偏移。我是否可以通过某种方式解决这个问题，即使有返回按钮也可以使标题居中显示？
底部图标位于屏幕中心。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: BackButton(
color: Colors.grey
),
elevation: 0,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.telegram_sharp, color: iconColor),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2)
),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
)
)
),
body: Padding(
padding: const EdgeInsets.all(20),
child: ListView(
children: [
_MainInfoWidget(),
],
),
),
);
}
在AppBar中居中显示标题和返回按钮的问题是由于以下原因导致的：
- 没有设置Row()的以下属性：MainAxisAlignment.center和MainAxisSize.min。
- 没有设置AppBar的centerTitle: true属性。
- 存在多余的Center()小部件。
解决方法是：
- 在Row()上设置以下属性：MainAxisAlignment.center和MainAxisSize.min。
- 在AppBar上设置centerTitle: true属性。
- 删除多余的Center()小部件。
以下是完整的示例代码：
Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(color: Colors.grey),
elevation: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.telegram_sharp, color: Colors.black),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),
),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Container(),
),
);
结果如下图所示：
问题原因：在AppBar中添加返回按钮时，标题无法居中显示。
解决方法：尝试以下几种方法来解决该问题：
1. 在AppBar中添加centerTitle属性，并将其设置为true。
AppBar(
centerTitle: true
// 其他属性...
)
2. 添加mainAxisSize属性，并将其设置为MainAxisSize.min。
AppBar(
mainAxisSize: MainAxisSize.min
// 其他属性...
)
3. 如果以上方法都没有解决问题，可以在转换发生时改变mainAxisAlignment属性。当转换发生时，将mainAxisAlignment属性设置为MainAxisAlignment.start，否则设置为center。
Row(
mainAxisAlignment: transition ? MainAxisAlignment.start : MainAxisAlignment.center,
// 其他属性...
)
请检查上述方法是否解决了问题。