如何在应用程序栏的标题中间居中

我试图在一个应用程序栏中心的标题文本，有一个领先和尾随的行动。

@override
Widget build(BuildContext context) {
final menuButton = new PopupMenuButton<int>(
onSelected: (int i) {},
itemBuilder: (BuildContext ctx) {},
child: new Icon(
Icons.dashboard,
),
);


return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: new Text(widget.title, textAlign: TextAlign.center),
leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
body: new Center(
child: new Text(
'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}

这种方法很有效，除了标题在左边对齐，如下图所示:

TITLE TO THE LEFT

当我试图把标题放在中间时，它似乎太偏左了:

@override
Widget build(BuildContext context) {
final menuButton = new PopupMenuButton<int>(
onSelected: (int i) {},
itemBuilder: (BuildContext ctx) {},
child: new Icon(
Icons.dashboard,
),
);


return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)),
leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
body: new Center(
child: new Text(
'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}

TITLE NOT WELL CENTERED

我想要一个解决方案，让标题文字完美地居中在两个图标之间。

157992 次浏览
小开
最佳答案

标题居中是 iOS 的默认设置。在 Android 上，AppBar的标题默认为左对齐，但是您可以通过将 centerTitle: true作为参数传递给 AppBar构造函数来覆盖它。

例如:

AppBar(
centerTitle: true, // this is all you need
...
)
小开

如果您想创建自定义应用程序栏标题，这里有一种不同的方法。例如，您希望在应用程序栏中心的图像和文本，然后添加

appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.your_app_icon,
color: Colors.green[500],
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],


),
)

在这里，我们已经创建了一个 Row与 MainAxisAlignment.center中心的孩子。然后我们添加了两个孩子-一个图标和一个带文本的 Container。我在 Container中包装了 Text小部件，以添加必要的填充。

小开

我遇到了同样的问题，当我添加
MainAxisSize: MainAxisSize.min 到我的 Row()小部件:

 return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that
// was created by the App.build method, and use it to set
// our appbar title.
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
widget.title,
),
],
),


leading: new IconButton(
icon: new Icon(Icons.accessibility),
onPressed: () {},
),
actions: [
menuButton,
],
),
);
}
小开

下面是我如何在应用程序栏上创建居中标题:

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
centerTitle: true ,
title: new Text("Login"),
),
body: new Container(
padding: EdgeInsets.all(18.0),
key: formkey,
child: ListView(
children: buildInputs() + buildSubmitButton(),
),
)
);
}
小开

使用 Center对象

    appBar: AppBar(
title: Center(
child: const Text('Title Centered')
)
)
小开 
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
actions: <Widget> [
IconButton(icon: const Icon(Icons.file_upload), onPressed: _pressed),
],
leading: IconButton(icon: const Icon(Icons.list), onPressed: _pressed),
centerTitle: true,
)
body: Text("Content"),
);
}
小开

在尝试了许多解决方案后，这帮助了我 centerTitle: true 增加样本代码除了 @ Collin Jackson答案

例子 在 build(BuildContext context)

做这个

appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),centerTitle: true
),
小开

在我的例子中，我希望有一个标志/图像中心，而不是一个文本。在这种情况下，centerTitle是不够的(不知道为什么，我有一个 svg 文件，也许这就是原因...) ，例如:

appBar: AppBar(centerTitle: true, title: AppImages.logoSvg)

不会真正中心的图像(加上图像可能太大，等)。对我来说有效的代码是这样的:

appBar: AppBar(centerTitle: true,
title: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 35, maxWidth: 200),
child: AppImages.logoSvg)),
小开

这可以帮助在中心的 Appbar 标题文本。 您可以选择添加您想要的样式使用样式或注释它，如果不需要。

appBar: AppBar(
title:  const Center(
child: Text(
"App Title",
style: TextStyle( color: Colors.white,fontSize: 20),
),
),
),

应用程序显示:

enter image description here

小开

可以使用 标题参数将 appBar 的标题居中。

CenterTitle 是 Boolean Datatype，默认值为 False。

标题 : < em > 没错

例如:

import 'package:flutter/material.dart';


void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('App Title'),
backgroundColor: Colors.red,
centerTitle: true,
),
),
),
);
}

enter image description here

小开 
appbar:AppBar(
centerTitle: true,
title:Text("HELLO")
)
小开

AppBar 有自己的 bool 条件，用于显示或不显示标题中心,

enter image description here

如果你说的是真的,

  appBar: AppBar(
title: Text(
"header Text",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),

然后它将是中心，其他然后它的默认左对齐(在机器人) Ios 设置中心(默认)。

小开

如果我的情况下，这个代码工作:-

AppBar: AppBar (

    centerTitle: true,


elevation: 2,


title: Center(


child: Row(


mainAxisAlignment: MainAxisAlignment.center,


children: [


Container(


child: Text("  TINKLE"),


)


],


),


),
    

),

希望这对你有帮助。

小开

是的，但在我的情况下，我使用的中心标题以及轴对齐，然后它使它成为中心，如果我只使用它的一部分，那么它不是使它成为中心，这里是我如何做到这一点:

import 'package:flutter/material.dart';
import 'package:infintywalls/widgets/widget.dart';


class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}


class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
appName(),
],
),
elevation: 0.0,
centerTitle: true,
),
);
}
}

对了，appName ()是我的自定义小部件，不是默认的内置小部件。

这对你有帮助 谢谢

小开

只需使用 appBar部分中的 centerTitle属性将标题居中即可 使用:

centerTitle: true
小开

它可以通过使用 Center 类来完成。

appBar: AppBar(
title: const Center(
child: Text("I Am Rich"),
),
),
小开

尝试以下代码:

AppBar(
centerTitle: true,
…
),

提交答案