Flutter：按钮周围的 SizedBox 破坏了文本对齐

Question

我正在构建一个键盘，但是，从昨天开始我遇到了 2 个奇怪的行为：

(1) 我使用 SizedBox 构建按钮以创建方形按钮导致文本右对齐。实际上它看起来更像是一个偏移量，因为如果添加一个文本比 1、2、3 更长的按钮（下面代码段中的“某些文本”），则不会显示该文本。如果我将文本剪切到第一个字符，就会显示这个字符。

(2) 小键盘托管在一列中。该列的 crossAxisAlignment 居中。虽然我放在键盘上方或下方的所有列项目都居中，但键盘仍保持在左侧。同样将 CreateKeyPad 包裹在对齐中或（如现在的代码片段中）将 CreateKeyPad 中的行居中也无济于事。

为了更容易理解，我对代码进行了一些压缩，希望它仍然有效。

在下面的屏幕截图中，顶部的 0 水平居中。

import 'package:flutter/cupertino.dart';

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

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

class _Tackle1x1PageState extends State<Tackle1x1Page> {
  int value = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: SafeArea(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                Text((value != null ? value : "0")),
                CreateKeypad(
                  prevInput: (value != null ? value : 0),
                  updtedInput: (int val) {
                    setState(() => value = val);
                  },
                ),
            ],
        ),),
    );
  }
}

// CREATE KEYPAD
class CreateKeypad extends StatelessWidget {
  final int prevInput;
  final Function(int) updtedInput;

  CreateKeypad({
    @required this.prevInput,
    @required this.updtedInput,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget> [
          Column(
            children: <Widget>[
              CreateKey(
                keyValue: 1,
                keyReturnValue: (int val) {
                  updtedInput(prevInput != null? 10 * prevInput + val : val);
                },
              ),
              CreateKey(
                keyValue: 4,
                keyReturnValue: (int val) {
                  updtedInput(prevInput != null? 10 * prevInput + val : val);
                },
              ),
              CreateKey(
                keyValue: 7,
                keyReturnValue: (int val) {
                  updtedInput(prevInput != null? 10 * prevInput + val : val);
                },
              ),
            ],
          ),
          Column(
              children: <Widget>[
                CreateKey(
                  keyValue: 2,
                  keyReturnValue: (int val) {
                    updtedInput(prevInput != null? 10 * prevInput + val : val);
                  },
                ),
                CreateKey(
                  keyValue: 5,
                  keyReturnValue: (int val) {
                    updtedInput(prevInput != null? 10 * prevInput + val : val);
                  },
                ),
              Padding(
                padding: const EdgeInsets.all(2.0),
                child: SizedBox(
                  width: 80.0,
                  height: 80.0,
                  child: Text("some text", style: TextStyle(color: CupertinoColors.black)),
                ),
              ),
            ],
          ),
        ]
    ),);
  }
}

// CREATE SINGLE KEY
class CreateKey extends StatelessWidget {
  final int keyValue;
  final VoidCallback keyTabbed;
  final Function(int) keyReturnValue;

  CreateKey({
    @required this.keyValue,
    @required this.keyReturnValue,
    this.keyTabbed,
  });

  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(2.0),
        child: SizedBox(
          width: 80.0,
          height: 80.0,
          child: CupertinoButton(
            child: Text(keyValue.toString(), style: TextStyle(color: CupertinoColors.black)),

            onPressed: () {
              keyReturnValue(keyValue);
            },
            color: CupertinoColors.systemGrey,
          ),
        ),
      );
  }
}

Answer 1

您可以尝试将 CupertinoButton 包装在 Center 小部件中吗？

Answer 2

CupertinoButton 的默认 padding 为 EdgeInsets.all(16.0) 如果没有给定 color 并且它的默认 padding 为 EdgeInsets.symmetric(vertical:14.0, horizontal: 64.0) 如果给它一个 color。为了能够使 Text 居中，您可以给它一个 zero.

的填充

我使用您的代码提供了一个示例：

class CreateKey extends StatelessWidget {
  final int keyValue;
  final VoidCallback keyTabbed;
  final Function(int) keyReturnValue;

  CreateKey({
    @required this.keyValue,
    @required this.keyReturnValue,
    this.keyTabbed,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: SizedBox(
        width: 80.0,
        height: 80.0,
        child: CupertinoButton(
          // remove the default padding 
          padding: EdgeInsets.zero, // new line
          child: Text(
            keyValue.toString(),
            style: TextStyle(
              color: CupertinoColors.black,
            ),
          ),
          onPressed: () {
            keyReturnValue(keyValue);
          },
          color: CupertinoColors.systemGrey,
        ),
      ),
    );
  }
}

要使小键盘水平居中，请将 Row 的 mainAxisAlignment 属性设置为 MainAxisAlignment.center。

我以您的代码为例添加了一个演示：

 return Center(
      child: Row(
        // set the mainaxisalignment property to center
        mainAxisAlignment: MainAxisAlignment.center, // new line
        children: <Widget>[
        ...... other widgets

Flutter：按钮周围的 SizedBox 破坏了文本对齐

Flutter: SizedBox around button corrupts text alignment

alignment

dart

flutter