先看看效果吧,如下图:
套用的移动端实现逻辑,使用一个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;
});
}),
),
],
),
);
}
仅做记录!