Flutter Getx - 将数据发送到其他页面答案

【问题标题】：Flutter Getx - Sending the data to the other pagesFlutter Getx - 将数据发送到其他页面
【发布时间】：2021-09-13 20:37:52
【问题描述】：

如何将我从 API 获取的数据发送到其他页面？在使用 getx 之前，我使用“widget.bla bla”发送，但现在我不知道如何发送。

class HomePage extends StatelessWidget {
  final AllCoinController allCoinController = Get.put(AllCoinController());
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Obx(
            () => ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: allCoinController.coinList.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GestureDetector(
                    onTap: () {
                      Get.to(CoinContent());
                    },
                    child: Container(
                      color: Colors.grey[700],
                      width: 150,
                      child: Row(
                        children: [
                          SizedBox(
                            width: 50,
                            height: 50,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Image.network(
                                  allCoinController.coinList[index].image),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(allCoinController.coinList[index].name),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(allCoinController.coinList[index].symbol),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(allCoinController
                                .coinList[index].currentPrice
                                .toString()),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }
    }

我要将数据发送到的页面：

class CoinContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("coin name"),
      ),
      body: Obx(
        () => Center(
          child: Column(
            children: [
              Text("coin data 1"),
              Text("coin data 2"),
              Text("coin data 3"),
              Text("coin data 4"),
              Text("coin data 5"),
              Text("coin data 6"),
            ],
          ),
        ),
      ),
    );
  }
}

而且我最后一个问题代码在使用 Getx 时不会自动找到。示例：

Text(allCoinController.coinList[index].currentPrice.toString()),

我没有使用 getx 就得到了相同的数据，没有问题。但是在使用 Getx 时，不会自动找到“currentPrice”代码并且不会出现。我需要复制代码来写。

我的控制器：

import 'dart:async';
import 'package:coin_finder/models/btc_eth_bnb_model.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;

class AllCoinController extends GetxController {
  var coinList = [].obs;

  final url = Uri.parse("api url")    
  Future callAllCoins() async {
    try {
      final response = await http.get(url);

      if (response.statusCode == 200) {
        List<dynamic> values = [];
        values = allCoinsFromJson(response.body);
        coinList.assignAll(values);

        if (values.length > 0) {
          for (int i = 0; i < values.length; i++) {
            if (values[i] != null) {
              coinList.add(values[i]);
            }
          }
        }
        return coinList;
      } else {
        print(response.statusCode);
      }
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  void onInit() {
    callAllCoins();
    Timer.periodic(Duration(minutes: 5), (timer) => callAllCoins());
    super.onInit();
  }
}

型号：

import 'dart:convert';

List<AllCoins> allCoinsFromJson(String str) =>
    List<AllCoins>.from(json.decode(str).map((x) => AllCoins.fromJson(x)));

String allCoinsToJson(List<AllCoins> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class AllCoins {
  AllCoins({
    required this.symbol,
    required this.name,
    required this.image,
    required this.currentPrice,
  });

  String symbol;
  String name;
  String image;
  num currentPrice;

  factory AllCoins.fromJson(Map<String, dynamic> json) => AllCoins(
        symbol: json["symbol"],
        name: json["name"],
        image: json["image"],
        currentPrice: json["current_price"],
      );

  Map<String, dynamic> toJson() => {
        "symbol": symbol,
        "name": name,
        "image": image,
        "current_price": currentPrice,
      };
}

Dart 版本：sdk: ">=2.12.0

【问题讨论】：

您不必做任何不同的事情，您可以将其传递为：Get.to(CoinContent(data : data));.... 如果您不想发送数据，那么您可以直接找到控制器： var allCoinController = Get.find();

标签： flutter dart flutter-getx

【解决方案1】：

 in home page  Get.to(CoinContent(),arguments: 
allCoinController.coinList[index] )
//
class CoinContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
final data = ModalRoute.of(context)!.settings.arguments as 
AllCoins;
return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    title: Text("coin name"),
  ),
  body:Center(
      child: Column(
        children: [
          Text("${data.name}"),
        
        ],
      ),
    ),
 );
}
}

【讨论】：

【解决方案2】：

在这种情况下，我们没有在构造函数中使用 agrs

而不是像Get.to(MyScreen());那样路由你应该使用Get.to(MyScreen(), arguments: [1,2,3]);

您可以使用Get.arguments 访问它们，它应该返回一个列表

注意：在使用应用程序时，参数不会更改，除非您通过使用 args 路由到另一个屏幕来覆盖它

【讨论】：