首页 > 解决方案 > Flutter Getx - 将数据发送到其他页面

问题描述

如何将我从 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 <3.0.0"

标签: flutterdartflutter-getx

解决方案


 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}"),
        
        ],
      ),
    ),
 );
}
}

推荐阅读