flutter来实现一个点击切换当前选中项的效果

前言：

      flutter来实现一个一个点击切换当前选中项的效果，这种效果如果用vue/jquery/js来做的话，通过改变他的class名，就可以了，定义一个class的样式，当前选中的有这个class名效果，但是其他的没有，但是在flutter中确实需要变一变思维了。

实现效果：

flutter实现步骤：

首先在方法的最外层定义一个变量，注意变量不能放在 build 里面，没有效果，为啥我知道，因为我在这里吃亏了

class _HomeworkState extends State<Homework> with SingleTickerProviderStateMixin {
  
  bool _pressed = true;

其次在定义一个方法，方法的核心就是，定义两套样式，点击谁，让谁的样式改变

 @override
  Widget _LinkText() {
    // final provider = Provider.of<CurrentPage>(context);

    BoxDecoration BoxDecoration_left1 = BoxDecoration(
      color: Color(0xffffffff),
      border: Border.all(width: 0.5, style: BorderStyle.solid,color: Color(0xffffffff)),
      borderRadius: BorderRadius.horizontal(left: Radius.circular(5))
    );
    BoxDecoration BoxDecoration_left2 = BoxDecoration(
      border: Border.all(width: 0.5, style: BorderStyle.solid,color: Color(0xffffffff)),
      borderRadius: BorderRadius.horizontal(left: Radius.circular(5))
    );
    BoxDecoration BoxDecoration_right1 = BoxDecoration(
      border: Border.all(width: 0.5, style: BorderStyle.solid,color: Color(0xffffffff)),
      borderRadius: BorderRadius.horizontal(right: Radius.circular(5))
    );
    BoxDecoration BoxDecoration_right2 = BoxDecoration(
      color: Color(0xffffffff),
      border: Border.all(width: 0.5, style: BorderStyle.solid,color: Color(0xffffffff)),
      borderRadius: BorderRadius.horizontal(right: Radius.circular(5))
    );

    TextStyle textStyle = TextStyle(fontSize: 14.0,color: Color(0xff31C27C));
    TextStyle textStyle1 = TextStyle(fontSize: 14.0,color: Color(0xffffffff));
    Color(0xff31C27C),background: new Paint()..color=Colors.white);

    return Container(
        width: 200.w,
        child: Row(

            children: <Widget>[
              Container(
                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(
                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;
                      });
                    }
                ),
              ),


            ]
        )
    );
  }

最后把定义的方法放到build里面去，就可以了

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xff31C27C),
        appBar: _appBarView(),
        body: Container(
            child: Row(
              children: <Widget>[
                    _LinkText()

              ]
            )
        )
    );
  }

到此结束！