如何在颤动中垂直居中容器子项答案

【问题标题】：How to center vertically a container child in flutter如何在颤动中垂直居中容器子项
【发布时间】：2020-09-23 05:19:10
【问题描述】：

我正在尝试将容器 appBar 的子元素垂直居中，它是文本，我是新来的，所以我在这里缺少什么。它只是水平居中

小部件

import 'package:flutter/material.dart';

class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
  final Widget title;

  const MyAppbar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 0.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(0.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border(
            bottom: BorderSide(
              color: Color(0xffd9d9d9),
              width: .8,
              style: BorderStyle.solid,
            ),
          ),
        ),

        child: Center(child: title),
      ),
    );
  }

  final Size preferredSize = const Size.fromHeight(kToolbarHeight);
}

我在哪里称呼它

Scaffold(
          appBar: MyAppbar(title: Text('Welcome to Ikaze', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400, color: Colors.black))),
          body: Center(),

        );

【问题讨论】：

可以上传完整代码吗？
Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [])
这是完整的代码，我刚刚上传了我称之为@BilaalAbdelHassan的地方
@bihireboris 使用 AppBar 小部件自定义您的应用栏。它有一个使文本居中的论点。请参阅下面的答案。

标签： flutter flutter-appbar

【解决方案1】：

Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Ikaze',
            style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w400,
                color: Colors.black)),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
                'location: ${userLocation.latitude}, ${userLocation.longitude}'),
          ]))

【讨论】：

我正在尝试将 appBar 文本而不是正文居中

【解决方案2】：

实际上，您自定义的 AppBar 中的文本是垂直居中的。

我认为你想要达到的效果是排除状态栏。

如果这是你想要的，只需用 SafeArea 包裹 Center Widget。

此处的文档：SafeArea

SafeArea(child: Center(child: title))

【讨论】：

非常感谢您的尝试，我发现了这个问题检查上面的答案

【解决方案3】：

使用带有参数centerTitle: true, 的AppBar 小部件

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

【讨论】：

后来我想自定义那个沉重的应用栏，这就是我尝试创建一个新小部件的原因

【解决方案4】：

所以发现了问题它实际上是居中的，但是因为它不在 safeArea 小部件中，所以包含的小部件包含该系统状态栏。

修复

return Material(
      elevation: 0.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(0.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Color(0xffd9d9d9),
              width: .8,
              style: BorderStyle.solid,
            ),
          ),
        ),

        child: SafeArea(
          child: Container(
            alignment: Alignment.center,
            child: title,
          )),
      ),
    );

【讨论】：

:) 格子，哦，这就是问题所在。