首页 文章

如何使appbar的 Headers 居中

提问于
浏览 次
12

我试图将 Headers 文本集中在一个既有前导又有尾随动作的应用栏中 .

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

这很有效，除了 Headers 在左边对齐，如下图所示：

TITLE TO THE LEFT

当我尝试将 Headers 包含在中心时，它似乎在左边太多了：

@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

我想要一个解决方案，让 Headers 文本在2个图标之间完美居中 . 非常感谢，

flutter

5 回答

  • 0

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

    回复于
  • 34

    如果要创建自定义应用栏 Headers ，可以使用不同的方法 . 例如，您需要在应用栏中心添加图片和文字，然后添加 -

    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'))
            ],

          ),
  )

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

    希望这可以帮助 .

    回复于
  • 0

    我遇到了同样的问题，当我加入时，它终于奏效了
    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,
        ],
      ),
    );
  }
    回复于
  • 0

    这是我在appbar上制作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(),
      ),
   ) 
);

    }`

    回复于
  • 0

    使用 Center 对象

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

相关问题