Question

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

小部件

node dist/bundle/index.js

我在哪里叫它

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

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中的文本是垂直居中的。

我认为您想要实现的效果是排除状态栏。

如果这是您想要的，只需将Center Widget与SafeArea包装在一起。

此处的文档：SafeArea

const socket = await ssh.shell();

const data = await waitForDataAsync(socket);
socket.write('my password\n');
//to fetch next shell output
const data_1 = await waitForDataAsync(socket);

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
  ...
)

如何在颤抖中使容器子垂直居中

4 个答案: