1

问题：在实现 REST API 时，我遇到了一些小部件的条件显示。所以 API 响应返回一个 bool 值。现在，如果 bool 值为 false，那么我想在 UI 中显示一个 TextField 小部件，否则只是一个文本小部件。现在我很困惑我应该如何实现它。

以下是 API 的功能 我们将发送一个帖子请求，并在其正文中发送一封电子邮件。API 将检查 API 是否存在于他们的数据库中，作为回报，他们将发送 true false 和响应。

我将附上我的代码片段。

API 管理器

class ApiService {
  static const int TIME_CONST = 20;
  Future<UserCheck> apiUserCheck(dynamic param) async {
    var client = http.Client();

    try {
      var response = await client
          .post(
              Uri.https(
                  "baseUrl", "endpoint"),
              body: param)
          .timeout(Duration(seconds: TIME_CONST));

      if (response.statusCode == 200) {
        print('Response Body: ${response.body}');
        final data = jsonDecode(response.body);
        return UserCheck(
          user: data['user_exists'],
        );
      } else {
        print("The response status is not 200");
        return param;
      }
    } on SocketException {
      throw FetchDataException('message', 'url');
    } on TimeoutException {
      throw ApiNotRespondingException("message", "url");
    }
  }
}

class UserCheck {
  final bool? user;
  UserCheck({this.user});
}

UI文件中使用的函数

        checkUserExist() {
        final check = ApiService();
        check.apiUserCheck({
          "email": emailController.text,
        }).then((value) {
          if (value.user == true) {
            print('User Exist: ');
          } else {
            print('User Does Not exists');
          }
        });
      }

界面部分：

 Padding(
                padding: EdgeInsets.fromLTRB(15, 20, 15, 5),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),


  ////////IF ELSE BLOCK TO BE USED HERE TO DISPLAY COMDITIONAL WIDGETS/////

              SizedBox(
                height: 50.h,
              ),

注意：API 的实现非常好，我可以验证电子邮件是否存在。我收到的响应正文是真假。

提前致谢。

4

2 回答 2

0

您应该使用可见性小部件。

根据文档

是否显示或隐藏孩子。

默认情况下，visible 属性控制子树是否包含在子树中；当它不可见时，替换的孩子（通常是一个零大小的盒子）被包括在内。

你可以做这样的事情

           Visibility(child:
           Padding(
                padding: EdgeInsets.fromLTRB(15, 20, 15, 5),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),


  ////////IF ELSE BLOCK TO BE USED HERE TO DISPLAY COMDITIONAL WIDGETS/////
              replacement:
              SizedBox(
                height: 50.h,
              ),
              visible: //your if condition
        ),
于 2021-07-22T20:43:08.730 回答
0

你可以试试这个FutureBuilder例子：

Widget build() {
  return FutureBuilder<bool>(
    future: checkUserExist(),
    builder: (context, snapshot) {
      if(snapshot.hasData) {
         if(snapshot.data) {
           return TextField();
         } else {
           return Text();
         }
       } else {
       /// Do something if there is no data like loading...
}
      
    }
  );
}

还要更改checkUserExist功能：

Future<bool> checkUserExist() async {
        final check = ApiService();
        return await check.apiUserCheck({
          "email": emailController.text,
        });
      }
于 2021-07-22T20:32:07.553 回答