列中的RaisedButton小部件之间出现不需要的空间
问题内容:
tl; dr 当我没有
明确设置任何按钮时,为什么两个按钮之间会出现空格?
我正在尝试进行以下布局:
该图描绘了一个基本的移动登录页面,该页面由一个居中的列组成,该列包含徽标和下面的两个垂直堆叠的按钮,用于登录和注册。 徽标和按钮之间有一些空间,但按钮之间没有空间
但是,两个
按钮之间似乎有大约16px的空间,我无法弄清楚它的来源。
我一开始以为也许是Column
在增加空间,但是我正在使用MainAxisAlignment.center
它不应该增加任何空间。现在我认为有
可能是一些材料主题化的事情,可自动适用于填充
的RaisedButton,但是我已经通过都显得
button_theme.dart 和raised_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));
}
问题答案:
添加属性 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,
),
);