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

如何解决Flutter：按钮周围的SizedBox破坏了文本对齐方式

我正在构建一个键盘，但是自昨天以来，它与2种奇怪的行为作斗争：

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

（2）小键盘位于一列中。列的crossAxisAlignment位于中心。当我放在键盘上方或下方的所有列项目居中时，键盘仍保持在左侧。另外，将CreateKeyPad包裹在Align或（如现在在代码段中）的中心位置，对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,CreateKey(
                keyValue: 7,Column(
              children: <Widget>[
                CreateKey(
                  keyValue: 2,keyReturnValue: (int val) {
                    updtedInput(prevInput != null? 10 * prevInput + val : val);
                  },CreateKey(
                  keyValue: 5,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,child: CupertinoButton(
            child: Text(keyValue.toString(),onPressed: () {
              keyReturnValue(keyValue);
            },color: CupertinoColors.systemGrey,);
  }
}

解决方法

如果CupertinoButton的默认padding为{{1}，如果没有给定EdgeInsets.all(16.0)，并且其默认color为{{1} }，如果给定padding。为了使EdgeInsets.symmetric(vertical:14.0,horizontal: 64.0)居中，可以给其填充color。

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

Text

要将键盘水平居中，请将zero的{​​{1}}属性设置为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,); } } 。

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

mainAxisAlignment

,

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