textAlign：TextAlign.center，颤动不起作用

Question

我是一名刚开始学习 Flutter 的学生。我不会将我的文本和按钮对齐到屏幕的中心。我使用此代码对齐中心。另外，我使用单独的小部件来创建它们，如代码所示。

textAlign: TextAlign.center,

它对我不起作用。另外，我创建的文本框根本没有显示。如何在我的应用上修复这些错误。

  import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class babyNameScreen extends StatefulWidget {
      const babyNameScreen({Key? key}) : super(key: key);
    
      @override
      _babyNameScreenState createState() => _babyNameScreenState();
    }
    
    class _babyNameScreenState extends State<babyNameScreen> {
      @override
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
      }
    
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            leading: IconButton(
              icon: new Icon(
                Icons.arrow_back_rounded,
                color: Colors.black,
              ),
              onPressed: () {
                // Navigator.push(
                //   context,
                //   MaterialPageRoute(
                //       builder: (context) =>  WelcomeScreen()));
              },
            ),
          ),
    
          body: Padding(
            padding: const EdgeInsets.only(top: 40),
    
            child: ListView(
              children: [
                StepText(),
                SizedBox(
                  height: 25,
                ),
                NameText(),
                SizedBox(
                  height: 25,
                ),
                EnterNameText(), 
                // SizedBox(
                //   height: 25,
                // ),
    
                TextBox(),           //text field
                ContinueButton(),  //elevated button
              ],
            ),
          ),
        );
      }
    }
    
    Widget StepText() => Container(
          child: Row(children: [
            Text(
              'STEP 2/5',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 12,
                color: Colors.deepPurple,
                fontWeight: FontWeight.w700,
              ),
            ),
          ]),
        );
    
    Widget NameText() => Container(
          child: Row(children: [
            Text(
              'What is her name?',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 25,
                color: Colors.black,
                fontWeight: FontWeight.w700,
    
              ),
            ),
          ]),
        );
    
    
    Widget EnterNameText() => Container(
      child: Row(children: [
        Text(
          'Enter name of your new profile.',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 15,
            color: Colors.grey,
            fontWeight: FontWeight.w500,
    
          ),
        ),
      ]),
    );

    //text field

    Widget TextBox()=> Container(
      child: Row(
        children: [
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ],
      ),
    
    );
    
//elevated button
    Widget ContinueButton()=> Container (
      child: Row(
        children: [
          ElevatedButton(
            onPressed: () {
              //playSound(soundNumber);
            },
             child: Text('Continue'),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          ),
        ],
      ),
    );

Answer 1

你可以用这种方式来实现你想要的布局

import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class babyNameScreen extends StatefulWidget {
      const babyNameScreen({Key? key}) : super(key: key);
    
      @override
      _babyNameScreenState createState() => _babyNameScreenState();
    }
    
    class _babyNameScreenState extends State<babyNameScreen> {
      @override
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
      }
    
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            leading: IconButton(
              icon: new Icon(
                Icons.arrow_back_rounded,
                color: Colors.black,
              ),
              onPressed: () {
                // Navigator.push(
                //   context,
                //   MaterialPageRoute(
                //       builder: (context) =>  WelcomeScreen()));
              },
            ),
          ),
    
          body: Padding(
            padding: const EdgeInsets.only(top: 40),
    
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                StepText(),
                SizedBox(
                  height: 25,
                ),
                NameText(),
                SizedBox(
                  height: 25,
                ),
                EnterNameText(), 
                // SizedBox(
                //   height: 25,
                // ),
    
                TextBox(),           //text field
                ContinueButton(),  //elevated button
              ],
            ),
          ),
        );
      }
    }
    
    Widget StepText() => Container(
          child: Text(
            'STEP 2/5',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 12,
              color: Colors.deepPurple,
              fontWeight: FontWeight.w700,
            ),
          ),
        );
    
    Widget NameText() => Container(
          child: Text(
            'What is her name?',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 25,
              color: Colors.black,
              fontWeight: FontWeight.w700,
    
            ),
          ),
        );
    
    
    Widget EnterNameText() => Container(
      child: Text(
        'Enter name of your new profile.',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 15,
          color: Colors.grey,
          fontWeight: FontWeight.w500,
    
        ),
      ),
    );

    //text field

    Widget TextBox()=> Container(
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: 'Enter a search term',
        ),
      ),
    
    );
    
//elevated button
    Widget ContinueButton()=> Container (
      child: ElevatedButton(
        onPressed: () {
          //playSound(soundNumber);
        },
         child: Text('Continue'),
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(Colors.deepPurple),
        ),
      ),
    );

Answer 2

在Row 中使用mainAxisAlignment: MainAxisAlignment.center。

这样，

    Widget StepText() => Container(
        child: Row(
             mainAxisAlignment: MainAxisAlignment.center, // Add this line...
              children: [
                Text(
                  'STEP 2/5',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.deepPurple,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ]),
            );

欲了解更多信息：https://docs.flutter.dev/development/ui/layout

为了移除 AppBar 的阴影，使用海拔高度，

appBar: AppBar(
       backgroundColor: Colors.transparent,
       elevation: 0.0,)

欲了解更多信息：https://api.flutter.dev/flutter/material/Material/elevation.html