Flutter 在flatter中的操作后显示小部件

在操作后显示小部件的最佳方式是什么？在我的例子中，我想在用户错过登录凭据后显示文本

忘记密码？

，这样他可以选择重置密码或通过电子邮件发送密码。 图1：

在用户错过密码后的第二张图片中，会触发一个操作，并出现

忘记密码

：

---

我曾想过使用

AnimatedOpacity（）

，但不确定这是否是正确的方法。提前感谢您的建议。

您可以使用状态管理来显示或隐藏任何操作上的任何小部件。请参见下面的示例，阅读内联注释中的解释

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget{
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  bool showcard = false; //set widget show to false

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("Show widget on action"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body: Container(
          child: Column(children: [
              
              showcard?Container( //check if showcard is true or false
                child: Card(
                  child: Padding( 
                    padding: EdgeInsets.all(20),
                    child:Text("This is card widget")
                  )
                )
              ):Container(),
              //if showcard is true then show card, else show empty contianer.

              Container( 
                child: ElevatedButton( 
                  child: Text(showcard?"Hide Card":"Show Card"),
                  onPressed: (){
                    setState(() { //update UI with setState
                        if(showcard){
                            showcard = false; 
                            //if showcard is true, then make it false to hide
                        }else{
                            showcard = true;
                            //if showcard is false, then make it true to show.
                        }
                    });
                  },
                )
              )

          ],)    
        )
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主页：主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
bool showcard=false；//将小部件显示设置为false
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“操作时显示小部件”），//应用程序标题
backgroundColor:Colors.redAccent，//应用程序栏的背景色
),
主体：容器(
子项：列（子项：[
showcard？容器（//检查showcard是否正确
孩子：卡片(
儿童：填充（
填充：边缘设置。全部（20），
子：文本（“这是卡片小部件”）
)
)
)：Container（），
//如果showcard为true，则显示card，否则显示空contianer。
货柜（
儿童：提升按钮（
子项：文本（显示卡？“隐藏卡”：“显示卡”），
已按下：（）{
setState（（）{//使用setState更新UI
如果（显示卡）{
showcard=false；
//如果showcard为true，则将其设为false以隐藏
}否则{
showcard=true；
//如果showcard为false，则将其设置为true以显示。
}
});
},
)
)
],)    
)
);
}
}

在这个例子中，有一个凸起的按钮，当你点击它时，卡片会出现，有一个“隐藏”按钮，当你点击它时，卡片会消失，反之亦然

输出：

按“显示卡片”按钮后的卡片小部件

---

这是一个最小的工作代码，用于传递消息。您可以使用setState

在有状态小部件中

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController _email = TextEditingController();
  TextEditingController _password = TextEditingController();
  bool _forgotPassword = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _email,
        ),
        TextField(
          controller: _password,
        ),
        _forgotPassword 
            ? TextButton(
                onPressed: () async {
                  //await your logic for forgotton password
                },
                child: Text('Forgot Password'))
            : Container(),
        TextButton(
            onPressed: () async {
              //await your login logic, if it returns false\error\not authenticated, then you can change the state of _forgotPassword, and then shows 'forgot password TextButton'
              setState(() {
                _forgotPassword = true;
              });
            },
            child: Text('Login'))
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
类LoginScreen扩展StatefulWidget{
@凌驾
_LoginsScreenState createState（）=>\u LoginsScreenState（）；
}
类_LoginScreenState扩展状态{
TextEditingController_email=TextEditingController（）；
TextEditingController_password=TextEditingController（）；
bool _forgotPassword=false；
@凌驾
小部件构建（构建上下文）{
返回列(
儿童：[
文本字段(
控制员：_电子邮件，
),
文本字段(
控制器：_密码，
),
_放弃密码
？文本按钮(
onPressed:（）异步{
//等待您放弃密码的逻辑
},
子项：文本（‘忘记密码’）
：Container（），
文本按钮(
onPressed:（）异步{
//等待您的登录逻辑，如果它返回false\error\not authenticated，则您可以更改_forgotPassword的状态，然后显示“忘记密码文本按钮”
设置状态（）{
_forgotPassword=true；
});
},
子项：文本（'Login'））
],
);
}
}

下面是一个非常简单的代码示例，介绍如何使用Visibility小部件进行此操作

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  bool showForgotPassword = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: emailController,
        ),
        TextField(
          controller: passwordController,
        ),
        Visibility(
          child: Text("Forgot Password?"),
          visible: showForgotPassword,
        ),
        RaisedButton(
          child: Text("Log in"),
          onPressed: () {
            // Validate password
            if (passwordController.text != 'realpassword') {
              setState(() {
                showForgotPassword = true;
              });
            } else {
              // continue
            }
          },
        ),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
类LoginScreen扩展StatefulWidget{
@凌驾
_LoginsScreenState createState（）=>\u LoginsScreenState（）；
}
类_LoginScreenState扩展状态{
TextEditingController emailController=TextEditingController（）；
TextEditingController密码控制器=TextEditingController（）；
bool showForgotPassword=false；
@凌驾
小部件构建（构建上下文）{
返回列(
儿童：[
文本字段(
控制器：emailController，
),
文本字段(
控制器：密码控制器，
),
可见度(
子项：文本（“忘记密码？”），
可见：showForgotPassword，
),
升起的按钮(
子项：文本（“登录”），
已按下：（）{
//验证密码
if（passwordController.text！=“realpassword”）{
设置状态（）{
showForgotPassword=true；
});
}否则{
//继续
}
},
),
],
);
}
}

当我们用错误的密码点击登录按钮时。我们将可见性小部件的visible属性更改为true。因此，密码文本变得可见

如果我们键入正确的密码，那么可见性小部件的visible属性将变为false。因此，文本变得不可见

输出

当他们输入错误的密码时：

当他们输入正确的密码时：

---

请发布您的代码片段，以便它可以在任何时候修改和编辑，而不是为您的问题编写专栏和小部件。感谢您的帮助，我将在我的项目中对其进行更多测试并制作