代码之家  ›  专栏  ›  技术社区  ›  Matt

列中上升按钮小部件之间出现不需要的空间

  •  1
  • Matt  · 技术社区  · 6 年前

    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

    然而,这两个按钮之间出现了大约16px的空间,我不知道它是从哪里来的。

    我一开始以为 Column 正在添加空间,但我正在使用 MainAxisAlignment.center 这不应该增加任何内容。我现在认为可能有一些材料主题化会自动将填充应用到 RaisedButton 但是我已经看完了 button_theme.dart raised_button.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()),
            ]));
    }
    

    主\按钮.dart (可扩展的自定义圆形按钮小部件 启动按钮 ):

    ...
    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 回复  |  直到 6 年前
        1
  •  1
  •   diegoveloper    6 年前

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