flutter中 button 的问题

在使用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),
       ),
     ),
   ),