Question

我的应用程序栏中有一个图像，标题。我希望它水平和垂直居中。我可以设法将其水平居中，但无法在应用栏中将其垂直居中。我尝试了其他方法来实现这一目标，并在下面提供的实现中将其留为注释行

当前用户界面：-

期望的用户界面：-

实施：-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pan_asia_bank_app/screens/AccountSummary.dart';

class Login extends StatelessWidget{

  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.white)
                  ),
                  color: Colors.white,
                  textColor: Colors.red,
                  onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => AccountSummary()));},
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
//            title: Column(
//              mainAxisAlignment: MainAxisAlignment.center,
//              crossAxisAlignment: CrossAxisAlignment.center,
//
//              children: <Widget>[
//                Image.asset("assets/logo.png", fit: BoxFit.cover,),     <---------- Another way I tried
//              ]
//            )
            title: Image.asset("assets/logo.png", fit: BoxFit.cover, ),
            centerTitle: true,
          ),
        ),
      body: Column(
        children: [
          Container(
              margin: const EdgeInsets.only(top: 10),
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,

                    children: [
                      Container(
                        margin: const EdgeInsets.only(left: 25, top: 50, right: 25),
                        child:_inputField('UserName', Colors.white),
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 25, top: 10, right: 25),
                        child: _inputField('Password', Colors.white),
                      ),
                      Container(
                        margin: const EdgeInsets.only( top: 15),
                        child: Text('Forgot Password?', style: TextStyle(color: Colors.white),),
                      ),
                      Container(
                        margin: const EdgeInsets.only( top: 25),
                        child: _buttons('Login', context),
                      ),
                    ],
                  )
              )
          ),
          Container(
            margin: const EdgeInsets.only(top: 80),
            child: Table(
              border: TableBorder(top: BorderSide(color: Colors.white, width: 4),
                                  verticalInside: BorderSide(color: Colors.white, width: 4),
                                  horizontalInside: BorderSide(color: Colors.white, width: 4)
              ),
              children: [
                TableRow(
                  children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]
                ),
                TableRow(
                  children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]
                )
              ],
            ),
          )
        ],
      )


    );
  }

}

Answer 1

您可以使用MediaQuery，并添加底部padding/margin，直到其到达中心vertically。 MediaQuery的用法有助于在每个屏幕上显示相同的结果，因此您只需要查看它是否垂直居中即可

       PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            title: Container(   // <--- Change here
               padding: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height * 0.1) // <-- play with the double number
               child: Image.asset("assets/logo.png", fit: BoxFit.cover)
            ),
            centerTitle: true,
          )
        )

EdgeInset.symmetric(vertical: your_number)，将照顾到底部-顶部的空间，该空间会将项目对齐到中心。这是一个巧妙的解决方法，可以在每个屏幕上使用。确保仅使用MediaQuery。

只要继续在MediaQuery中使用小数或双数，就可以了。请在此处阅读有关MediaQuery的信息。

Answer 2

我将分享另一种实现方式。
使用“ flexibleSpace”而不是“ title”，可以实现您的要求。

这是我的代码。
（我没有资产，所以做了一个带有容器和边框的简单徽标）

appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            flexibleSpace: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 100, vertical: 5),
                  decoration: BoxDecoration(border: Border.all()),
                  child: Text('logo'),
                ),
              ],
            ),
            centerTitle: true,
          ),
        ),

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Login();
  }
}

class Login extends StatelessWidget {
  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context) {
    return Center(
        child: ButtonBar(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ButtonTheme(
            minWidth: 200,
            child: RaisedButton(
              child: new Text(name),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
                side: BorderSide(color: Colors.white),
              ),
              color: Colors.white,
              textColor: Colors.red,
              onPressed: () {},
            )),
      ],
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            flexibleSpace: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 100, vertical: 5),
                  decoration: BoxDecoration(border: Border.all()),
                  child: Text('logo'),
                ),
              ],
            ),
            centerTitle: true,
          ),
        ),
        body: Column(
          children: [
            Container(
                margin: const EdgeInsets.only(top: 10),
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: SingleChildScrollView(
                    child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin:
                          const EdgeInsets.only(left: 25, top: 50, right: 25),
                      child: _inputField('UserName', Colors.white),
                    ),
                    Container(
                      margin:
                          const EdgeInsets.only(left: 25, top: 10, right: 25),
                      child: _inputField('Password', Colors.white),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      child: Text(
                        'Forgot Password?',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 25),
                      child: _buttons('Login', context),
                    ),
                  ],
                ))),
            Container(
              margin: const EdgeInsets.only(top: 80),
              child: Table(
                border: TableBorder(
                    top: BorderSide(color: Colors.white, width: 4),
                    verticalInside: BorderSide(color: Colors.white, width: 4),
                    horizontalInside:
                        BorderSide(color: Colors.white, width: 4)),
                children: [
                  TableRow(children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]),
                  TableRow(children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ])
                ],
              ),
            )
          ],
        ));
  }
}

如何在Appbar抖动中使图像居中？

2 个答案: