问题
i Got Questions here. How to change screen using FLutter Getx. I got GetxControll that searchUser from firestore. Here's the code.
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;
}
}
then i want to change UI from buildNoContent() to With buildSearchedContent(). when user enter text in the TextField. then it will auto change the UI. i already got the searchUser but the UI Doesn't change. here the UI Code. Thank You
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
),
],
),
),
}
}
回答1:
Below I've posted an example of how to use Get to reactively update your UI.
The key points are:
- your Controller class should have an observable variable/field/property. This is an
Rx<Type>
type of variable. It is actually a stream. When you change its value, Get will rebuild any widgets that are observing its value. - in your UI / Widget class, have either a GetX, Obx, GetBuilder widget (there are others as well) that wraps your observable variable. This is the widget that watches for changes to an observable & rebuilds itself when such an event arrives.
To run the example below...
In your pubspec.yaml file, add a dependency for english_words
:
english_words: 3.1.5
Example:
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
Then you can copy paste this to a file and run it in an emulator.
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'),
);
}
}
来源:https://stackoverflow.com/questions/64969768/how-to-change-screen-using-flutter-getx