Flutter--Button浅谈

作为一个常用到不能再常用的组件，material库中的button组件都有一点奇怪——存在无法设置的内外边距，我们做一个简单的展示，选几个常见button，统一使用Text做child，外加一个带红色的Container组件，观察margin和padding.

你会发现，除了InkWell，即使padding设置为0，仍然无法消除消除上下padding，这其实不是padding属性没有生效，而是这些按钮有默认大小的约束。这点可以通过源码和不设置child的UI来佐证。

MaterialButton设置它的高度属性，看源码的使用，是修改高度约束，但是小到一定程度还是无法修改，是因为有别的地方进一步作出了限制，这就是我觉得奇怪的一些地方。这会给使用者带来不便，所以我设计基础组件的基本原则之一就是不要去干涉外界的使用，比如我做了一个Card组件，我就不会给它一个默认margin。

MaterialButton(
  onPressed: () {

  },
  // child: Text("MaterialButton"),
  padding: EdgeInsets.all(0),
  height: 10,
)

解决之法

其实就是前面提到的唯一正常的组件，Inkwell，其实上面所有的button都是对它的进一步封装，它包含点击特效（水波纹），以及各种手势识别，而它的本质也是在GestureDetector的基础上加了一个动画层，所以如果不需要动画效果，你大可以直接使用GestureDetector。进阶一点的做法就是基于这两者来创建你自己的Button。

InkWell的build部分源码（ink_well.dart）

 测试的代码

Column(children: [
        SizedBox(width: double.infinity,),

        addSpacer(),

        InkWell(child: Text("InkWell"), onTap: () {

        },).addRedBackground(),

        addSpacer(),

        TextButton(
          onPressed: () {}, 
          child: Text("TextButton"),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero)
          ),
        ).addRedBackground(),

        addSpacer(),

        MaterialButton(
          onPressed: () {

          },
          child: Text("MaterialButton"),
          padding: EdgeInsets.all(0),
        ).addRedBackground(),
        
        addSpacer(),
        
        OutlinedButton(
            onPressed: () {},
            child: Text("OutlinedButton"),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero),
          ),
        ).addRedBackground(),
      ],
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
      ),


//空button
Column(children: [
        SizedBox(width: double.infinity,),

        addSpacer(),

        InkWell(child: Text(""), onTap: () {

        },).addRedBackground(),

        addSpacer(),

        TextButton(
          onPressed: () {}, 
          child: Text(""),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero)
          ),
        ).addRedBackground(),

        addSpacer(),

        MaterialButton(
          onPressed: () {

          },
          // child: Text("MaterialButton"),
          padding: EdgeInsets.all(0),
        ).addRedBackground(),
        
        addSpacer(),
        
        OutlinedButton(
            onPressed: () {},
            child: Text(""),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero),
          ),
        ).addRedBackground(),
      ],
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
      )