Flutter开发之--按钮切换状态

先看看效果吧，如下图：

 

套用的移动端实现逻辑，使用一个bool值标记状态，编写两套UI，具体代码如下：

1.声明一个bool值，不要再build方法里面声明

bool _pressed = true;

2，具体实现代码

 Widget _onClick() {
    BoxDecoration BoxDecoration_left1 = BoxDecoration(
        color: Colors.red,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_left2 = BoxDecoration(
        color: Colors.white,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_right1 = BoxDecoration(
        color: Colors.white,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));
    BoxDecoration BoxDecoration_right2 = BoxDecoration(
        color: Colors.red,
        border: Border.all(
            width: 0.5, style: BorderStyle.solid, color: Colors.white),
        borderRadius: BorderRadius.circular(20));

    TextStyle textStyle = TextStyle(fontSize: 16.0, color: Colors.white);
    TextStyle textStyle1 =
        TextStyle(fontSize: 16.0, color: Color.fromARGB(255, 83, 81, 81));

    return Container(
      width: 200,
      height: 40,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        children: <Widget>[
          Container(
            width: 100,
            height: 40,
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: 3, bottom: 3, right: 3, left: 3),
            decoration: _pressed ? BoxDecoration_left1 : BoxDecoration_left2,
            child: GestureDetector(
                child: Text('买入', style: _pressed ? textStyle : textStyle1),
                onTap: () {
                  print('按天数点击');
                  setState(() {
                    //具体的操作
                    _pressed = !_pressed;
                  });
                }),
          ),
          Container(
            width: 100,
            height: 40,
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: 3, bottom: 3, right: 3, left: 3),
            decoration: _pressed ? BoxDecoration_right1 : BoxDecoration_right2,
            child: GestureDetector(
                child: Text('卖出', style: _pressed ? textStyle1 : textStyle),
                onTap: () {
                  print('按科目点击');
                  setState(() {
                    _pressed = !_pressed;
                  });
                }),
          ),
        ],
      ),
    );
  }

仅做记录！