首页 > 解决方案 > 将动态数据传递到 Flutter 中的多个页面

问题描述

我使用 json 从我的数据库中获取数据,现在我想在列表视图中使用该动态数据,每当您单击其中任何一个时,它都会将您导航到另一个页面,该页面再次使用之前获取的动态数据。这是我的 json 的数据模型:

    class Base{
    //the type of our object is the array
      List <Device> array;
      List<Device> devices;
      Base( {this.devices});
      factory Base.fromJson(Map<String,dynamic> parsedJson){
        var list = parsedJson['devices'] as List;
        List<Device> deviceList = list.map((i) => Device.fromJson(i)).toList();
        return Base(
            devices: deviceList
        );

      }

    }

    class Device {
      String device_desc,device_title,image_path;
      int status_id;
      List<function> functions;
      Status statuss ;
      Device({this.device_desc,this.device_title,this.image_path,this.status_id,this.functions,this.statuss});
      factory Device.fromJson(Map<String,dynamic>parsedJson){
        //var functionFromJson=parsedJson["function"];
        //List<function> functionList=functionFromJson.cast<function>();
        var list = parsedJson['functions'] as List;
        List<function> functionList=list.map((i)=>function.fromJson(i)).toList();
        return Device(
            device_desc: parsedJson["device_desc"],
            device_title: parsedJson["device_title"],
            image_path: parsedJson["image_path"],
            status_id: parsedJson["status_id"],
            functions: functionList,
            statuss: Status.fromJson(parsedJson['statuss'])
        );
   }

    }

    class Status {
      String status_desc, status_title;

      Status({this.status_desc,this.status_title});
      factory Status.fromJson(Map<String,dynamic>parsedJson){
        return Status(
          status_desc: parsedJson["status_desc"],
          status_title: parsedJson["status_title"],
        );
      }



    }


    class function {
      String function_desc, function_title;
      int device_id, status;
      function ({this.function_desc,this.function_title,this.device_id,this.status});
      factory function.fromJson(Map<String,dynamic> parsedJson){
        return function(
            function_desc: parsedJson["function_desc"],
            function_title:parsedJson["function_title"],
            device_id: parsedJson["device_id"],
            status: parsedJson["status"]

        );
      }
    }

现在我以这种方式将数据导航到第二页:(此导航器位于 listview.builder 中,因此,我们可以使用索引)

  onPressed: () { Navigator.push(context,MaterialPageRoute(builder: (context)=> MyHomePage2(snapshot.data.devices[index]))); },

我定义了一个变量,它的类型是设备,我使用构造函数来指定不同的动态数据:

Class MyHomePage2 extends StatefulWidget {
  final Device devices2;
  MyHomePage2(this.devices2);
  @override
  _MyHomePage2State createState() => new _MyHomePage2State();
}

但是每当我想使用名为 devices2 的变量时,例如,下面的代码:

 Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('خانه هوشمند'),
      ),
      body: ListView(
        //the main list containing stack , device image,device name
        children: <Widget>[
          new Container(
               //for appropriate image size I use container 
                padding: EdgeInsets.all(50.0),
                child:  ListView(
               //contains devicename and image
               physics: new NeverScrollableScrollPhysics(),
               shrinkWrap: true,
               children: <Widget>[
                ListView(
                physics: new NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                children: <Widget>[
                new Image.asset('images/acc.png',fit: BoxFit.fitWidth,),
                new Text('نام دستگاه',textAlign: TextAlign.right,style: TextStyle(fontSize: 25.0,color: Colors.teal),),
                new Text(devices2[0].device_title,textAlign: TextAlign.right,style: TextStyle(fontSize: 20.0,color: Colors.blueGrey),),
                  ],
                  ),
               ],
             ),
             ),

会导致错误

[dart] 未定义名称“devices2”。

Tnx 寻求帮助:)

标签: jsonflutterdynamic-data

解决方案


在您的代码中:

new Text(devices2[0].device_title,textAlign: TextAlign.right,style: TextStyle(fontSize: 20.0,color: Colors.blueGrey),),

改成:

new Text(widget.devices2[0].device_title,textAlign: TextAlign.right,style: TextStyle(fontSize: 20.0,color: Colors.blueGrey),),

推荐阅读