先看看效果吧,如下图:
套用的移动端实现逻辑,使用一个bool值标记状态,编写两套UI,具体代码如下:
1.声明一个bool值,不要再build方法里面声明
bool _pressed = true;
2,具体实现代码
Widget _onClick() { BoxDecoration BoxDecoration_left1 = BoxDecoration( color: Colors.red, border: Border.all( 0.5, style: BorderStyle.solid, color: Colors.white), borderRadius: BorderRadius.circular(20)); BoxDecoration BoxDecoration_left2 = BoxDecoration( color: Colors.white, border: Border.all( 0.5, style: BorderStyle.solid, color: Colors.white), borderRadius: BorderRadius.circular(20)); BoxDecoration BoxDecoration_right1 = BoxDecoration( color: Colors.white, border: Border.all( 0.5, style: BorderStyle.solid, color: Colors.white), borderRadius: BorderRadius.circular(20)); BoxDecoration BoxDecoration_right2 = BoxDecoration( color: Colors.red, border: Border.all( 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( 200, height: 40, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(20), ), child: Row( children: <Widget>[ Container( 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( 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; }); }), ), ], ), ); }
仅做记录!