Flutter 中 Column 第一个元素的附加宽度

Question

我正在尝试在 Flutter 的一个列中实现两个均匀分布的按钮。在重复两次小部件时，第一个按钮按特定宽度缩小。检查时，发现了这个。

我无法确定此未知宽度的原因。下面是代码供参考。

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('Findo', style: Theme.of(context).textTheme.subtitle1),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () => {print('pressed')},
                    child: Text(
                      'Store Login',
                      style: Theme.of(context).textTheme.bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                        padding: const EdgeInsetsDirectional.fromSTEB(
                            100, 20, 100, 20),
                        primary: Theme.of(context).primaryColor,
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(50.0)))),
                  ),
                  ElevatedButton(
                    onPressed: () => {print('pressed')},
                    child: Text(
                      'Customer Login',
                      style: Theme.of(context).textTheme.bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                        padding: const EdgeInsetsDirectional.fromSTEB(
                            100, 20, 100, 20),
                        primary: Theme.of(context).accentColor,
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(50.0)))),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

ElevatedButton 没有高度或宽度限制。就内部内容而言，它需要 space 或（宽度和高度）。在您的情况下，Store 和 Customer 的长度不同。所以客户按钮的宽度比商店大。你可以用一个容器包裹按钮，并给它们一个像这样的宽度-

             Container(
                      width: 300,
                      child: ElevatedButton(
                      onPressed: () => {print('pressed')},
                      child: Text(
                      'Store Login',
                      style: Theme.of(context).textTheme.bodyText1,
                  ),
                style: ElevatedButton.styleFrom(
                padding: const EdgeInsetsDirectional.fromSTEB(
                100, 20, 100, 20),
                primary: Theme.of(context).primaryColor,
                shape: const RoundedRectangleBorder(
                borderRadius:
                BorderRadius.all(Radius.circular(50.0)))),
                ),
                    ),

Flutter 中 Column 第一个元素的附加宽度

Additional width for first element of Column in Flutter

android

flutter

flutter-column