列中的RaisedButton小部件之间出现不需要的空间

时间:2018-12-10 22:29:35

标签: dart widget flutter flutter-layout

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.dartraised_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 :(得分:1)

添加属性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,
          ),
        );