列中的RaisedButton小部件之间出现不需要的空间 [英] Unwanted space appearing between RaisedButton widgets in a column

问题描述

tl; dr 为什么我没有明确设置任何两个按钮之间会出现空格？

我正在尝试进行以下布局：

I am trying to make a layout like the one below:

但是，看起来好像是在两个按钮之间大约有16像素的空格，我无法弄清楚它的来源。

However, what appears to be about 16px of space appears between the two buttons and I cannot figure out where it is coming from.

我最初想到的是列正在添加空间，但是我正在使用 MainAxisAlignment.center ，该空间不应添加任何内容。我现在认为可能正在发生一些Material主题，这些主题会自动将填充应用于 RaisedButton ，但是我浏览了两个 button_theme.dart 和 raised_button.dart ，似乎只有内部填充（在文本和按钮边缘）已设置。我确定我忽略了某些东西，将不胜感激，以找出存在此空间的原因。

I at first thought maybe the Column was adding space but I am using MainAxisAlignment.center which shouldn't add any. I now think that there is perhaps some Material theming going on that automatically applies padding to the RaisedButton, however I have looked through both button_theme.dart and raised_button.dart and it seemed like only the inner padding (between text and button edges) was being set. I'm sure I overlooked something and would appreciate any help in finding out why this space exists.

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 ）：

primary_button.dart (custom rounded button widget that extends 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));
}

推荐答案

添加属性 materialTapTargetSize 并将其设置为 MaterialTapTargetSize.shrinkWrap 。

add the property materialTapTargetSize and set it to MaterialTapTargetSize.shrinkWrap.

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

如果您检查 RawMaterialButton 会根据该值添加一个填充：

if you check the source code of RawMaterialButton it adds a padding based on that value:

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

这篇关于列中的RaisedButton小部件之间出现不需要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！