flutter - Button

涉及到button部分，首先就是想看一下在flutter当中，有没有和iOS中UIButton各种状态。

当前需求：

如图，按钮点击选中，选中状态下改变字体颜色与边框并在有上角增加个图片

在iOS中的话，这种操作 分分钟就结束了，在flutter上，就要搞了一会，因为是边学边搞，有点慢 flutter 当前的提供的Button

TextButton

const TextButton({
    Key? key,
    required VoidCallback? onPressed,//点击方法
    VoidCallback? onLongPress,//长按点击
    ButtonStyle? style,button样式
    FocusNode? focusNode,//焦点
    bool autofocus = false,
    Clip clipBehavior = Clip.none,//剪裁方式
    required Widget child,
  }) 

重点看一下 ButtonStyle

const ButtonStyle({
    this.textStyle,//字体样式
    this.backgroundColor,//背景颜色
    this.foregroundColor,//前景色
    this.overlayColor,////设置水波纹颜色
    this.shadowColor,//阴影
    this.elevation,//阴影 0 是取消阴影 
    this.padding,//设置按钮内边距
    this.minimumSize,//设置按钮的大小
    this.fixedSize,
    this.maximumSize,
    this.side,//设置边框
    this.shape,//外边框装饰 会覆盖 side 配置的样式
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
    this.splashFactory,
  });

怎么根据不同的状态显示不同的背景色和字体状态？

已textStyle为例：

textStyle: MaterialStateProperty.resolveWith((states){
    //states状态
    //hovered
    //focused
    //pressed
    //dragged
    //selected
    //scrolledUnder
    //disabled
    //error
    根据不同的状态返回想要的效果
    if (states.contains(MaterialState.focused) &&
        !states.contains(MaterialState.pressed)) {
      //获取焦点时的颜色
      return TextStyle(fontSize: 18, color: Colors.red)；
    } else if (states.contains(MaterialState.pressed)) {
      //按下时的颜色
      return TextStyle(fontSize: 18, color: Colors.red)；
    }
    //默认状态使用灰色
    return TextStyle(fontSize: 18, color: Colors.red)；
  },
})

实现代码逻辑如下：

    
    
    TextStyle _normalStyle = TextStyle(color: AppColors.color666, fontSize: 14);
    TextStyle _selectStyle = TextStyle(color: AppColors.nav1, fontSize: 14);

    BoxDecoration _norBoxDecoration = BoxDecoration(
        color: AppColors.colorf5f5,
        borderRadius: BorderRadius.all(Radius.circular(5.w)));

    BoxDecoration _selectBoxDecoration = BoxDecoration(
        color: AppColors.colorf5f5,
        borderRadius: BorderRadius.all(Radius.circular(5.w)),
        border: Border.all(color: AppColors.nav1, width: 0.5.w));

    
    TextButton(
        style: ButtonStyle(
          overlayColor: MaterialStateProperty.all(Colors.white),
        ),
        onPressed: () {
          setState(() {
            wsxPress = !wsxPress;
          });
        },
        child: Stack(
          children: [
            Container(
              width: 107.w,
              height: 28.w,
              alignment: Alignment.center,
              decoration:
                  wsxPress ? _selectBoxDecoration : _norBoxDecoration,
              child: Text(
                '无时效',
                style: wsxPress ? _selectStyle : _normalStyle,
              ),
            ),
            Positioned(
              right: 0,
              child: Offstage(
                offstage: !wsxPress,
                child: Image.asset(
                  'assets/images/home/xzxg.png',
                  width: 15.w,
                  height: 15.w,
                ),
              ),
            ),
          ],
        ),
    )

IconButton

   IconButton(
      onPressed: () {},
      icon: Image.asset(
        'assets/images/home/xlcx_small.png',
        width: 20.w,
        height: 20.w,
    )
  )