在 Flutter 中将一列居中在另一列中答案

【问题标题】：Centring a Column inside another Column in Flutter在 Flutter 中将一列居中在另一列中
【发布时间】：2021-02-17 00:14:12
【问题描述】：

我目前正在编写我的第一个 Flutter 应用程序，但我有点卡在这里。基本上我要做的是在屏幕顶部显示一个图像（上边距为100px）并显示一个包含一些文本和一个按钮的列在屏幕的中心。我尝试将 mainAxisAlignment crossAxisAlignment 移动到外部 Column 小部件中，但这会将所有内容居中。

这是我的代码：

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: Column(
      children: [
        Opacity(
          opacity: 0.25,
          child: Container(
            child: Image.asset('assets/images/logo.png'),
            margin: EdgeInsets.only(top: 100),
            width: 75,
          ),
        ),

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Please enter your first name:'),
            TextButton(onPressed: () {}, child: Text('Submit'))
          ],
        )
      ],
    ),
  ),
);

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

尝试，将您的第二个 Column 包装在 Center 小部件中。

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: Column(
      children: [
        Opacity(
          opacity: 0.25,
          child: Container(
            child: Image.asset('assets/images/logo.png'),
            margin: EdgeInsets.only(top: 100),
            width: 75,
          ),
        ),

        Center(
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Please enter your first name:'),
            TextButton(onPressed: () {}, child: Text('Submit'))
          ],
        )
      ],
     ),
    ),
  ),
);

如果这不起作用，您还可以将其包装在 Align 小部件中并为其添加对齐属性。

Align(
            alignment: Alignment.center,
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Please enter your first name:'),
              TextButton(onPressed: () {}, child: Text('Submit'))
            ],
          ),
      ),

【讨论】：

【解决方案2】：

import 'package:flutter/material.dart';

void main() {
  runApp(
  MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 200,
            width: 200,
            color: Colors.pink,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
            ),
          ),
        ],
      ),
    ),
  ),
),
);
}

【讨论】：

【解决方案3】：

您必须使用 mainAxisAlignment 属性来设置 MainAxisAlignment.center。

【讨论】：

【解决方案4】：

为了使您的第二列居中对齐，

确保第二列的 MainAxisAlignment 是 MainAxisAlignment.center
将第二列包装在对齐小部件中
现在，用 Expanded 小部件包装 Align 小部件。

这应该可以解决您的问题。

检查此引用。

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const SizedBox(
        height: 18.0,
      ),
      const Padding(
        padding: EdgeInsets.only(left: 16.0),
        child: Text(
          'Recent Search(s)',
          style: TextStyle(
              color: Colors.black,
              fontSize: 16.0,
              fontWeight: FontWeight.bold),
        ),
      ),
      Expanded(
        child: Align(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                MdiIcons.magnify,
                color: Colors.grey.shade600,
                size: 72.0,
              ),
              const SizedBox(
                height: 8.0,
              ),
              Text(
                'Search for places',
                style: TextStyle(
                    fontSize: 14.0,
                    color: Colors.grey.shade600,
                    fontWeight: FontWeight.w600),
              ),
              Text(
                'You haven\'t serached for any items yet...',
                style: TextStyle(
                    fontSize: 12.0,
                    color: Colors.grey.shade700,
                    fontWeight: FontWeight.w500),
              ),
              Text(
                'Try now - we will help you!',
                style: TextStyle(
                    fontSize: 12.0,
                    color: Colors.grey.shade700,
                    fontWeight: FontWeight.w500),
              )
            ],
          ),
        ),
      )
    ],

【讨论】：