Нежелательное пространство, появляющееся между виджетами RaisedButton в столбце - PullRequest
Новая
       22

Нежелательное пространство, появляющееся между виджетами RaisedButton в столбце

0 голосов
/ 11 декабря 2018

tl; dr Почему между моими двумя кнопками появляется пробел, если я не установил явно ни одной из них?

Я пытаюсь создать макет, подобный одномуниже:

Image depicting a basic mobile login page consisting of a centered column containing a logo and two vertically-stacked buttons underneath for login and registration. There is some space between the logo and the buttons but no space between the buttons

Однако между двумя кнопками появляется то, что кажется размером около 16 пикселей, и я не могу понять, откуда он.

Сначала я подумал, что, возможно, Column добавляет пробел, но я использую MainAxisAlignment.center, который не должен добавлять ни одного.Теперь я думаю, что, возможно, идет какая-то тема Материалов, которая автоматически применяет заполнение к RaisedButton, однако я просмотрел как button_theme.dart , так и поднял_button.dart , и мне показалось, чтокак будто был задан только внутренний отступ (между краями текста и кнопок).Я уверен, что что-то упустил и был бы признателен за любую помощь в выяснении, почему это пространство существует.

auth.dart (экран показан на рисунке) 

...
Widget build(BuildContext context) {
return Scaffold(
    backgroundColor: Colors.white,
    body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(flex: 2, child: Container()),
          Expanded(
              flex: 8,
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                        padding: EdgeInsets.fromLTRB(0, 0, 0, 32),
                        child: Image(
                            fit: BoxFit.contain,
                            image: AssetImage('lib/res/drawable/logo.webp'))),
                    PrimaryButton(
                        onPressed: //...,
                        child: Text('Log In')),
                    PrimaryButton(
                        onPressed: //...,
                        child: Text('Sign Up')),
                  ])),
          Expanded(flex: 2, child: Container()),
        ]));
}

primary_button.dart (пользовательский виджет с закругленными кнопками, расширяющий RaisedButton): 

...
Widget build(BuildContext context) {
return Theme(
    data: Theme.of(context).copyWith(
      textTheme: Theme.of(context).textTheme,
      buttonTheme: Theme.of(context).buttonTheme.copyWith(
          padding: EdgeInsets.all(0),
          minWidth: double.infinity,
          buttonColor: Theme.of(context).accentColor,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24))),
    ),
    child: Builder(builder: super.build));
}

1 Ответ

0 голосов
/ 11 декабря 2018

добавьте свойство materialTapTargetSize и установите его в MaterialTapTargetSize.shrinkWrap. 

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

, если вы проверите исходный код RawMaterialButton, добавляется заполнение на основе этого значения: 

    Size minSize;
        switch (widget.materialTapTargetSize) {
          case MaterialTapTargetSize.padded:
            minSize = const Size(48.0, 48.0);
            break;
          case MaterialTapTargetSize.shrinkWrap:
            minSize = Size.zero;
            break;
        }

        return Semantics(
          container: true,
          button: true,
          enabled: widget.enabled,
          child: _InputPadding(
            minSize: minSize,
            child: result,
          ),
        );
...