tl; dr 当我没有 明确设置任何按钮时,为什么两个按钮之间会出现空格?
我正在尝试进行以下布局:
该图描绘了一个基本的移动登录页面,该页面由一个居中的列组成,该列包含徽标和下面的两个垂直堆叠的按钮,用于登录和注册。 徽标和按钮之间有一些空间,但按钮之间没有空间
但是,两个 按钮之间似乎有大约16px的空间,我无法弄清楚它的来源。
我一开始以为也许是Column在增加空间,但是我正在使用MainAxisAlignment.center它不应该增加任何空间。现在我认为有 可能是一些材料主题化的事情,可自动适用于填充 的RaisedButton,但是我已经通过都显得 button_theme.dart 和raised_button.dart ,它似乎只喜欢内填充(文字和按钮边缘之间),以 作为集。我敢肯定,我忽略了一些东西,希望能帮助您 找出为什么存在这个空间。
Column
MainAxisAlignment.center
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):
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
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
如果您检查它的源代码 RawMaterialButton 则会基于该值添加一个填充:
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, ), );