如何使用 Flutter Getx 换屏答案

【问题标题】：How to Change Screen Using Flutter Getx如何使用 Flutter Getx 换屏
【发布时间】：2021-03-06 05:57:05
【问题描述】：

我在这里有问题。如何使用 FLutter Getx 换屏。我从firestore得到了那个searchUser的GetxControll。这是代码。

class AuthenticationC extends GetxController {
final usersRef = FirebaseFirestore.instance.collection('Users');
List<QueryDocumentSnapshot> searchResultFuture;
  searchUser(String query) async {
    QuerySnapshot snapshot = await usersRef
        .where('DisplayName', isGreaterThanOrEqualTo: query)
        .get();

    searchResultFuture = snapshot.docs;   
    return snapshot.docs;
  }
}

然后我想将 UI 从 buildNoContent() 更改为 With buildSearchedContent()。当用户在 TextField 中输入文本时。然后它将自动更改用户界面。我已经得到了 searchUser，但 UI 没有改变。这里是 UI 代码。谢谢你

class SearchUserScreen extends StatelessWidget {
final authenticationC = AuthenticationC.to;
@override
Widget build(BuildContext context) {
    return Scaffold(
       body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            searchBox(),
            SizedBox(
              height: 20,
            ),
            authenticationC.searchResultFuture == null   // i want to change here 
                ? buildNoContent()                       // im already using GetBuilder<AuthenticationC> 
                : Expanded(child: buildSearchedContent(),// But it wont change
                  ),
          ],
        ),
      ),
  }
}

【问题讨论】：

标签： flutter get flutter-getx

【解决方案1】：

下面我发布了一个示例，说明如何使用 Get 响应式更新您的 UI。

重点是：

您的 Controller 类应该有一个可观察的变量/字段/属性。这是Rx<Type> 类型的变量。它实际上是一个流。当您更改其值时，Get 将重建任何观察其值的小部件。
在您的 UI / Widget 类中，有一个 GetX、Obx、GetBuilder 小部件（还有其他小部件）来包装您的可观察变量。这是一个小部件，用于监视对可观察对象的更改并在此类事件到达时自行重建。

要运行下面的示例...

在您的 pubspec.yaml 文件中，为 english_words 添加一个依赖项：

english_words: 3.1.5

例子：

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.

  cupertino_icons: 0.1.2
  english_words: 3.1.5

然后您可以将其复制粘贴到文件中并在模拟器中运行。

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AuthenticationC extends GetxController {
  static AuthenticationC get to => Get.find();
  RxList<String> searchResultFuture = <String>[].obs;

  @override
  onInit() {
    searchUser('blah');
  }

  searchUser(String query) async {
    await Future.delayed(Duration(seconds: 1)); // fake delay
    List<WordPair> wordpairs = generateWordPairs().take(3).toList();

    searchResultFuture.assignAll(wordpairs.map((wp) => wp.asPascalCase).toList());
    return searchResultFuture;
  }
}

class SearchUserScreen extends StatelessWidget {
  //final AuthenticationC ac = Get.put(AuthenticationC());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: QueryFAB(),
      body: GetX<AuthenticationC>(
        init: AuthenticationC(),
        builder: (ac) => ListView.builder(
          itemCount: ac.searchResultFuture.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(ac.searchResultFuture[index]),
            );
          },
        ),
      )
    );
  }
}

class QueryFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () => AuthenticationC.to.searchUser('not used'),
    );
  }
}

【讨论】：

【解决方案2】：

尝试将 Obx 放入您的 UI：

class SearchUserScreen extends StatelessWidget {
final authenticationC = AuthenticationC.to;
@override
Widget build(BuildContext context) {
return Scaffold(
   body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Obx(()=>Column(
      children: [
        searchBox(),
        SizedBox(
          height: 20,
        ),
        authenticationC.searchResultFuture == null   // i want to change here 
            ? buildNoContent()                       // im already using GetBuilder<AuthenticationC> 
            : Expanded(child: buildSearchedContent(),// But it wont change
              ),
      ],
    ),),
  ),
  }
}

【讨论】：