Flutter 2 如何去除ElevatedButton/TextButton的额外外边距
要去除Flutter 2中ElevatedButton、TextButton这类Material风格按钮自带的默认外部留白,只需要给按钮配置style参数,调整3个核心属性即可:
- 将
padding设置为你需要的内边距,无内边距需求可直接设为EdgeInsets.zero - 将
materialTapTargetSize设置为MaterialTapTargetSize.shrinkWrap,去除按钮默认为扩大点击区域新增的外部留白 - 可选配置:如果需要按钮完全贴合内容大小,可将
minimumSize设为Size.zero,取消按钮默认的最小宽高限制
修改后的示例代码如下:
Column( mainAxisSize: MainAxisSize.min, children: [ ElevatedButton( onPressed: () {}, style: ButtonStyle( padding: MaterialStateProperty.all(EdgeInsets.zero), tapTargetSize: MaterialTapTargetSize.shrinkWrap, minimumSize: MaterialStateProperty.all(Size.zero), ), child: Text('Login') ), TextButton( onPressed: () {}, style: ButtonStyle( padding: MaterialStateProperty.all(EdgeInsets.zero), tapTargetSize: MaterialTapTargetSize.shrinkWrap, minimumSize: MaterialStateProperty.all(Size.zero), ), child: Text('Login') ), ], )
如果需要全局生效无需逐个按钮配置,可以在项目根MaterialApp的theme属性中,统一配置elevatedButtonTheme和textButtonTheme的默认样式即可。
内容的提问来源于stack exchange,提问作者Da2ny
相关产品推荐
相关产品推荐

