flutter - 如何在颤动中垂直居中容器子项

Question

我正在尝试将容器 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(),

        );

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

Answer 2

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

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

如果这是您想要的，只需使用 SafeArea 包装 Center Widget。

此处的文档：SafeArea

SafeArea(child: Center(child: title))

Answer 3

所以发现了问题它实际上是居中的，但是因为它不在 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,
          )),
      ),
    );

Answer 4

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

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