如何使文本在容器中间居中？扑答案

【问题标题】：How to center the Text in the middle of the Container? Flutter如何使文本在容器中间居中？扑
【发布时间】：2021-12-07 10:04:24
【问题描述】：

我想将我的文本放在容器中间，但它们只将它们放在容器的顶部中间。这是我的代码：

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,

                child: const Text('BLE & Data'),
              ),
              //const SizedBox(height: 10),
              Container(
                margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,
                child: const Text('Statistiken',
                  textAlign: TextAlign.center,),
              ),
              const SizedBox(height: 10),
                Container(
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,
                child: const Text('Personal Data',
                  textAlign: TextAlign.center,
                  ),
              ),
            ],
          ),
        ));
  }
}

这是我的输出：Demo

如果有人能解决我的问题，我将非常感激

【问题讨论】：

用中心小部件包裹你的文本

标签： flutter dart containers

【解决方案1】：

您只需要用中心小部件包裹您的文本小部件。

Center(child:Text("")),

添加此代码：-

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(child: Text('BLE & Data')),
                ),
                //const SizedBox(height: 10),
                Container(
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(
                    child: Text(
                      'Statistiken',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                const SizedBox(height: 10),
                Container(
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(
                    child: Text(
                      'Personal Data',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

【讨论】：

【解决方案2】：

在Center 小部件中将您想要的任何内容包裹起来：

例如：

Container(
            margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
            height: 100,
            width: 300,
            color: Colors.green,

            child: Center( child: const Text('BLE & Data') ),
          ),

【讨论】：

非常感谢，现在可以了！！

【解决方案3】：

使用 alignment : Alignment.center 的 container() 小部件。

class Homepage extends StatefulWidget {
  const Homepage({Key key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text('BLE & Data'),
                ),
                //const SizedBox(height: 10),
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text(
                    'Statistiken',
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(height: 10),
                Container(
                  alignment: Alignment.center,
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text(
                    'Personal Data',
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

【讨论】：