Flutter：使用 GetX 刷新 ListView.Builder

Question

我正在根据toDoId的数量创建List of Cards。

toDoController.toDo() 就像

toDo = [q1, r4, g4, d4].obs;

而且，这是我的 ListView.builder()

  Obx(() {
         List _todo = toDoController.toDo();

         return ListView.builder(
         shrinkWrap: true,
         scrollDirection: Axis.horizontal,
         itemCount: _todo.length,
         itemBuilder: (BuildContext context, int i) {
                           
         var _loading = true;
         var _title = 'loading';
                          
         getTodoInfo() async {
         _title = await toDoController
                .getTodoInfo(
                     _todo[i]
                 );
         _loading = false;
         print(_title); // 'Clean!' <--- returns correct title
         }

         getTodoInfo();

         return Container(
           height: 150,
           width: 150,
           child: _loading
           ? Text(
             _title,
             )
             : Text(
             _title,
             ),
     );
    },
   );
  })

我试图让每个容器调用 http requests 从我的数据库中获取标题。获取标题，然后更新到下面的 Text() 小部件。但是，从服务器返回值后它不会更新。

我可以让他们等待使用 FutureBuilder 获取标题的请求。我也尝试过 FutureBuilder。但是，FutureBuilder 也不会对 variable 更改做出反应。所以，我想在这里做这个。我有点明白了。之后，小部件被返回，它不是可以改变的吗？有什么方法可以用 GetX 做到吗？

Answer 1

我没有测试它，因为我没有完整的样本，但我想这就是你要找的：

FutureBuilder<String>(
  future: toDoController.getTodoInfo(_todo[i]), 
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.hasData) {
      return Container(
        height: 150,
        width: 150,
        child: Text(snapshot.data),
     );
    } else if (snapshot.hasError) {
      return Text('Error');
    } else {
      return CircularProgressIndicator();
    }
  },
),

这是您需要为列表生成器的每个项目return编写的代码。

Answer 2

这是一个使用 GetX 和 Listview.builder 的例子。

此示例使用 GetBuilder 而不是 Obx，因为我不确定使用流是否会增加任何好处。如果出于某种原因需要 observables/streams，可以将 numbers 更新为 .obs，并且应删除 update() 调用并将 GetBuilder 替换为 [=16] =] 或 Obx。如果有人问，我会添加它作为替代示例。

GetBuilder 封装了 ListView.builder，只有 ListView 会被重建，而不是整个小部件树/页面。

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

class ListDataX extends GetxController {
  List<int> numbers = List<int>.from([0,1,2,3]);

  void httpCall() async {
    await Future.delayed(Duration(seconds: 1), 
            () => numbers.add(numbers.last + 1)
    );
    update();
  }

  void reset() {
    numbers = numbers.sublist(0, 3);
    update();
  }
}

class GetXListviewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ListDataX dx = Get.put(ListDataX());
    print('Page ** rebuilt');
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 8,
              child: GetBuilder<ListDataX>(
                builder: (_dx) => ListView.builder(
                    itemCount: _dx.numbers.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Number: ${_dx.numbers[index]}'),
                      );
                    }),
              ),
            ),
            Expanded(
              flex: 1,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    RaisedButton(
                      child: Text('Http Request'),
                      onPressed: dx.httpCall,
                    ),
                    RaisedButton(
                      child: Text('Reset'),
                      onPressed: dx.reset,
                    )
                  ],
                )
            )
          ],
        ),
      ),
    );
  }
}

`Obx` / 流版本

这是使用 Rx 流和 Obx 小部件的上述解决方案。

class ListDataX2 extends GetxController {
  RxList<int> numbers = List<int>.from([0,1,2,3]).obs;

  void httpCall() async {
    await Future.delayed(Duration(seconds: 1),
            () => numbers.add(numbers.last + 1)
    );
    //update();
  }

  void reset() {
    numbers = numbers.sublist(0, 3);
    //update();
  }
}


class GetXListviewPage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ListDataX2 dx = Get.put(ListDataX2());
    print('Page ** rebuilt');
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 8,
              child: Obx(
                () => ListView.builder(
                    itemCount: dx.numbers.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Number: ${dx.numbers[index]}'),
                      );
                    }),
              ),
            ),
            Expanded(
                flex: 1,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    RaisedButton(
                      child: Text('Http Request'),
                      onPressed: dx.httpCall,
                    ),
                    RaisedButton(
                      child: Text('Reset'),
                      onPressed: dx.reset,
                    )
                  ],
                )
            )
          ],
        ),
      ),
    );
  }
}

Flutter：使用 GetX 刷新 ListView.Builder

Flutter: Refreshing ListView.Builder with GetX

flutter

flutter-getx

`Obx` / 流版本

Flutter：使用 GetX 刷新 ListView.Builder

Flutter: Refreshing ListView.Builder with GetX

flutter

flutter-getx

Obx / 流版本

`Obx` / 流版本