如何使应用栏的标题居中答案

【问题标题】：How to center the title of an appbar如何使应用栏的标题居中
【发布时间】：2017-10-14 08:26:18
【问题描述】：

我正在尝试将标题文本置于同时具有前导和尾随操作的应用栏中。

@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.
  );
}

这很好用，只是标题在左边对齐，如下图所示：

当我尝试将标题包含在中心时，它似乎太靠左了：

@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.
  );
}

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

【问题讨论】：

标签： flutter

【解决方案1】：

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

例子：

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

【讨论】：

在这种情况下，标题不完全位于中心：/
这对我来说甚至不会影响标题的对齐方式。

【解决方案2】：

我遇到了同样的问题，当我将
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,
        ],
      ),
    );
  }

【讨论】：

【解决方案3】：

就我而言，我希望将徽标/图像居中而不是文本。在这种情况下，centerTitle 是不够的（不知道为什么，我有一个 svg 文件，也许这就是原因......），例如，这个：

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

不会真正使图像居中（加上图像可能太大等）。对我有用的是这样的代码：

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

【讨论】：

接受的答案适用于文本，但这是自定义小部件的正确答案。谢谢！
为我工作！当工具栏上有操作时，centerTitle 似乎无法正常工作。这个修好了。
对我来说，除了更简单的解决方案之外没有其他效果。就我而言，图像周围有透明的边框空间会导致放置不正确。只需将图像剪得更紧一点，简单的解决方案就可以奏效。

【解决方案4】：

这是我在应用栏上制作 centerTitle 的方法：

@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(),
      ),
   ) 
);
}

【讨论】：

【解决方案5】：

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

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。我将Text 小部件包裹在Container 中以添加必要的填充。

【讨论】：

【解决方案6】：

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

centerTitle为布尔数据类型，默认值为False。

centerTitle：真

例子：

import 'package:flutter/material.dart';

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

【讨论】：

【解决方案7】：

在尝试了许多解决方案后，这对我有帮助 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
      ),

【讨论】：

已经有一段时间了，这确实解决了问题。很简单。谢谢。

【解决方案8】：

应用栏：应用栏（中心标题：真实，标题：文本（“你好”） )

【讨论】：

【解决方案9】：

appBar 有自己的布尔条件用于标题中心显示与否，

所以，如果你设置为真，

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

然后它将居中，然后是默认左对齐（在android中） ios 设置中心（默认）。

【讨论】：

【解决方案10】：

@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"),
    );
}

【讨论】：

【解决方案11】：

是的，但在我的情况下，我使用了中心标题和轴对齐，然后它使它居中，如果我只使用它，那么它不是居中，这就是我的做法：

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() 是我的自定义小部件，而不是默认的内置小部件。

首页这对你有帮助谢谢

【讨论】：

您不需要额外的 Row() 小部件来执行此操作，您只需将 centerTitle 设置为 true

【解决方案12】：

您可以使用 appBar 部分中的 centerTitle 属性来使您的标题居中

【讨论】：

【解决方案13】：

这有助于在中心制作 Appbar 标题文本。您可以选择使用 Style 添加您想要的样式或在不需要时对其进行评论。

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

在应用显示上：

【讨论】：

【解决方案14】：

在我的情况下，这段代码有效：-

appBar: AppBar(

    centerTitle: true,

    elevation: 2,

    title: Center(

      child: Row(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Container(

            child: Text("  TINKLE"),

          )

        ],

      ),

    ),
    
  ),

希望这对您有所帮助。

【讨论】：

【解决方案15】：

使用Center 对象

    appBar: AppBar(
      title: Center(
        child: const Text('Title Centered')
      )
    )

【讨论】：

它不起作用，因为它不应该是那样的。