Блог

Однако я создаю клавиатуру, борясь с 2 странными поведениями со вчерашнего дня:

(1) моя конструкция кнопки с размером поля для создания квадратной кнопки приводит к выравниванию текста вправо. На самом деле это больше похоже на смещение, потому что, если добавить кнопку с более длинным текстом, чем 1, 2, 3 («некоторый текст» во фрагменте ниже), текст не отображается. Если я сокращу текст до 1-го символа, этот символ будет показан.

(2) клавиатура размещена в столбце. Выравнивание поперечных осей столбца по центру. Хотя все элементы столбца, которые я размещаю над или под клавиатурой, расположены по центру, клавиатура остается левой. Также не помогает перенос 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,
          ),
        ),
      );
  }
}
  

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,
        ),
      ),
    );
  }
}

  

Чтобы расположить клавиатуру по горизонтали, установите mainAxisAlignment свойство Row на MainAxisAlignment.center .

Я добавил демонстрацию, используя ваш код в качестве примера:

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

Можете ли вы попробовать обернуть CupertinoButton в Center виджет?