在使用flutter 中的button的时候(TextButton、IconButton、ElevatedButton)等。在直接使用的时候,组件会有margin 边距、padding、本身大小都会预先被设置了。
当我正常设置padding 和minimumSize 的时候,发现button 距离上下还有一段距离,但是我并没有设置margin。
TextButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.yellow),
// 设置padding
padding: WidgetStatePropertyAll(
EdgeInsets.symmetric(horizontal: 10.w, vertical: 2.h),
),
// 组件本身最小size
minimumSize: WidgetStatePropertyAll(Size(0, 0)),
// 按钮可按下区域的最小大小
// tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Text(
"展开",
),
),
这个时候需要添加上 tapTargetSize: MaterialTapTargetSize.shrinkWrap 如下图
TextButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.yellow),
// 设置padding
padding: WidgetStatePropertyAll(
EdgeInsets.symmetric(horizontal: 10.w, vertical: 2.h),
),
// 组件本身最小size
minimumSize: WidgetStatePropertyAll(Size(0, 0)),
// 按钮可按下区域的最小大小
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Text(
"展开",
),
),
因为tapTargetSize 是按钮可按下区域的最小大小,默认是48x48,所以需要将默认改为shrinkWrap(根据内容来决定点击区域的大小)。
padding是直接设置组件和文字之间的距离;
minimumSize 设置组件的最小大小。
tapTargetSize 是设置按钮可按下区域的最小大小。
有两个值:
- padded 最小点击目标大小扩展到48px乘48px。 默认
- shrinkWrap, 根据内容来决定点击区域大小。
button 都默认是有圆角,如果想要自己自定义圆角 则使用 shape
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(6.r),
),
),
),