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()

              ]
            )
        )
    );
  }

到此結束！