我有两个按钮,一个是显示,另一个是隐藏。当我点击显示按钮时,隐藏按钮的设计应该改变,当我点击隐藏按钮时,隐藏按钮来自旧的设计和显示按钮的设计被改变。
我有一个按钮的可见性和一个是可见性消失请帮助我在这一点。
class _DemoState extends State<Demo> {
bool canShowButton = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
children: [
SizedBox(
height: 10,
),
Visibility(
visible: canShowButton,
child: InkWell(
onTap: () {},
child: Container(
height: 50,
width: MediaQuery.of(context).size.width / 2,
color: AppTheme.orange,
child: Padding(
padding: const EdgeInsets.all(12.5),
child: Text("Show",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13.0,
fontFamily: "Segoe UI Bold",
color: AppTheme.white,
)),
),
),
),
),
Visibility(
visible: !canShowButton,
child: InkWell(
onTap: () {},
child: Container(
height: 50,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: AppTheme.white, border: Border.all(width: 2)),
child: Padding(
padding: const EdgeInsets.all(12.5),
child: Text("Show",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13.0,
fontFamily: "Segoe UI Bold",
color: AppTheme.orange,
)),
),
),
),
),
SizedBox(
height: 10,
),
Visibility(
visible: canShowButton,
child: InkWell(
onTap: () {
setState(() {
canShowButton = !canShowButton;
});
},
child: Container(
height: 50,
width: MediaQuery.of(context).size.width / 2,
color: AppTheme.orange,
child: Padding(
padding: const EdgeInsets.all(12.5),
child: Text("Hide",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13.0,
fontFamily: "Segoe UI Bold",
color: AppTheme.white,
)),
),
),
),
),
Visibility(
visible: !canShowButton,
child: InkWell(
onTap: () {
setState(() {
canShowButton = canShowButton;
});
},
child: Container(
height: 50,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: AppTheme.white, border: Border.all(width: 2)),
child: Padding(
padding: const EdgeInsets.all(12.5),
child: Text("Hide",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13.0,
fontFamily: "Segoe UI Bold",
color: AppTheme.orange,
)),
),
),
),
),
],
),
),
),
);
}
}
1条答案
按热度按时间laik7k3q1#
您可以使用Flag var来显示和隐藏按钮或更改按钮的样式
然后通过检查标志var
isShow
u可以设计你想要的