flutter 如何隐藏一个按钮点击另一个按钮

eblbsuwk  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(159)

我有两个按钮,一个是显示,另一个是隐藏。当我点击显示按钮时,隐藏按钮的设计应该改变,当我点击隐藏按钮时,隐藏按钮来自旧的设计和显示按钮的设计被改变。
我有一个按钮的可见性和一个是可见性消失请帮助我在这一点。

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,
                          )),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
laik7k3q

laik7k3q1#

您可以使用Flag var来显示和隐藏按钮或更改按钮的样式

bool isShow=false;

 ElevatedButton(
  style: ElevatedButton.styleFrom(
          backgroundColor: isShow?Colors.grey:Colors.green,
          ),
   onPressed: () {
           setState(() {
         isShow = !isShow;
           });
    },
   child: Container(
           child: Text(
                   isShow?"Hide":"show",
                   ),
           ),
       );

然后通过检查标志var isShow u可以设计你想要的

相关问题