Write the Code. Change the World.

4月 23

请看

  • 怎么设置样式
  • 怎么设置宽高 padding

https://blog.csdn.net/mengks1987/article/details/109480289

http://events.jianshu.io/p/ad231ab22cee

https://www.jianshu.com/p/5d24fd29ab8b

想要的东东

  • 设置按钮的 padding,margin 为 零
style: ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    minimumSize: MaterialStateProperty.all(Size(0, 0)),
    padding: MaterialStateProperty.all(EdgeInsets.zero),
)
  • 设置形状
style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10)))
)
  • 去掉阴影
style: ButtonStyle(
    shadowColor: MaterialStateProperty.all(Colors.transparent),
)
  • 去掉水波纹(去掉水波纹后,hove 等效果也没了)
style: ButtonStyle(
    splashFactory: NoSplash.splashFactory
)
  • 设置按钮内文字的样式
style: ButtonStyle(
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
)

整体啰嗦一遍:

const ButtonStyle({
  this.textStyle, //字体
  this.backgroundColor, //背景色
  this.foregroundColor, //前景色
  this.overlayColor, // 高亮色,按钮处于focused, hovered, or pressed时的颜色
  this.shadowColor, // 阴影颜色
  this.elevation, // 阴影值
  this.padding, // padding
  this.minimumSize, //最小尺寸
  this.side, //边框
  this.shape, //形状
  this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
  this.visualDensity, // 按钮布局的紧凑程度
  this.tapTargetSize, // 响应触摸的区域
  this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
  this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如,在Android上,点击会产生咔哒声,启用反馈后,长按会产生短暂的振动。通常,组件默认值为true。
});

常规的配置就这样了:

   style: ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    minimumSize: MaterialStateProperty.all(Size(0, 0)),
    padding: MaterialStateProperty.all(EdgeInsets.zero),
    shadowColor: MaterialStateProperty.all(Colors.transparent),
    backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
    // elevation: MaterialStateProperty.all(0),
    // splashFactory: NoSplash.splashFactory
  )

但是,通常,我们并不单独配,我们要配到主题里。这样,在逻辑的其他地方,只需要简单的使用 button 就可以了。先配置在主题里。

ThemeData lightTheme = ThemeData.light().copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        minimumSize: MaterialStateProperty.all(Size(0, 0)),
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        shadowColor: MaterialStateProperty.all(Colors.transparent),
        backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
        textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
        // elevation: MaterialStateProperty.all(0),
        // splashFactory: NoSplash.splashFactory
      ))
);

使用的时候:

SizedBox(
    width: 120,
    height: 40,
    child: ElevatedButton(
        onPressed: () {
        },
        child: Text(
        "我是按钮",
        ),
    ))

如果想覆盖或增加主题的设置:
比如,这里加了一个 borderradius 。

SizedBox(
    width: 120,
    height: 40,
    child: ElevatedButton(
    style: ButtonStyle()
                                .copyWith(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)))),
        onPressed: () {
        },
        child: Text(
        "我是按钮",
        ),
    ))

最后加一条。想让按钮自适应父容器。可以这个弄。

Container(
    width: 750,
    child: SizedBox(
        width: double.infinity,
        height: 92,
        child: ElevatedButton()
    )
)

SizedBox 能具体定义按钮的宽高,而 double.infinity 又不能突破 Container 的宽高。通常 Container 不是具体的宽高才会用到这种自适应的方式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注