如何在 Flutter 中返回带有映射列表的嵌套结构的值

Question

仍在尝试学习地图和列表。

我的目标是从嵌套的地图列表中返回一个列表。函数 getMovements() 按预期工作。它呈现一个动作列表。然后，我尝试创建另一个函数 getVariationsByMovement()，它传入移动字符串名称以尝试返回变体名称列表。在我的 UI 中，我展示了一个动作列表。用户选择一个动作，下一页会呈现一个变体列表。

我卡在 getVariationsByMovement 下面的函数中。

class MovementDataSource extends ChangeNotifier{

  List<Map> getAll() => _movement;

  List<String> getMovements()=> _movement
      .map((map) => MovementModel.fromJson(map))
      .map((item) => item.movement)
      .toList();

// I'd  like this to return a list of movement.variation.variationName

  getVariationsByMovement(String movement) => _movement
      .map((map) => MovementModel.fromJson(map))
      .where((item) => item.movement == movement)
      .map((item) => item.**I AM STUCK HERE**)
      .expand((i) => i)
      .toList();


  List _movement = [
    {
      "movement": "Plank",
      "alias": "plank",
      "variation": [
        {"variationName": "High Plank"}, {"variationName": "Forearm Plank"},
      ]
    },
    {
      "movement": "Side Plank",
      "alias": "side plank",
      "variation": [
        {"variationName": "Side Plank Right"}, {"variationName": "Side Plank Left"},
      ],
    },
  ];
}

我的模型

class MovementModel {
  String movement;
  String alias;
  List<VariationModel> variation;

  MovementModel({this.movement, this.alias, this.variation});

  // from firestore
  MovementModel.fromJson(Map<String, dynamic> json) {
    var list = json['variation'] as List;
    List<VariationModel> variationList = list.map((i) => VariationModel.fromJson(i)).toList();
    movement = json['movement'];
    alias = json['alias'];
    variation = variationList;
  }

  // to firestore
  Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['movement'] = this.movement;
  data['alias'] = this.alias;
  //data['variation'] = VariationModel;
  return data;
  }
}

class VariationModel {
  String variationName;
  String description;

  VariationModel({this.variationName, this.description});

  // from firestore
  VariationModel.fromJson(Map<String, dynamic> json) {
    variationName = json['variationName'];
    description = json['description'];
  }

  // to firestore
  Map<String, dynamic> toJson() {

    return {
      'variationName': variationName,
      'description': description,
    };
  }
}

更新 在这种情况下，我试图将结果返回给列表生成器。

  @override
  Widget build(BuildContext context) {
    final _movementDataLocator = locator<MovementDataSource>();
    return ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: _movementDataLocator.getVariationsByMovement(movement).length,
        itemBuilder: (buildContext, index) {
          return Card(
            child: ListTile (
              title: Text(
                _movementDataLocator.getVariationsByMovement(movement)[index].toString(),
                style: TextStyle(fontSize: 20),
              ),
              trailing: Icon(Icons.keyboard_arrow_right),
              onTap: () async {
                Navigator.push(context, MaterialPageRoute(
                    builder: (_) => SelectDefaultItemPage(variation: _movementDataLocator.getVariationsByMovement(movement)[index])));
              },
            ),
          );
        }
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用variation: List<VariationModel>.from(json["variation"].map((x) => VariationModel.fromJson(x))
代码sn-p

factory MovementModel.fromJson(Map<String, dynamic> json) => MovementModel(
        movement: json["movement"],
        alias: json["alias"],
        variation: List<VariationModel>.from(
            json["variation"].map((x) => VariationModel.fromJson(x))),
      );
      
...
List<VariationModel> vList =
        MovementDataSource().getVariationsByMovement("Plank");

for (int i = 0; i < vList.length; i++) {
      print(vList[i].variationName);
    }
      

输出

I/flutter (21879): High Plank
I/flutter (21879): Forearm Plank

完整代码

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

List<MovementModel> movementModelFromJson(String str) =>
    List<MovementModel>.from(
        json.decode(str).map((x) => MovementModel.fromJson(x)));
String movementModelToJson(List<MovementModel> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class MovementDataSource extends ChangeNotifier {
  List<Map> getAll() => _movement;

  List<String> getMovements() => _movement
      .map((map) => MovementModel.fromJson(map))
      .map((item) => item.movement)
      .toList();

// I'd  like this to return a list of movement.variation.variationName

  getVariationsByMovement(String movement) => _movement
      .map((map) => MovementModel.fromJson(map))
      .where((item) => item.movement == movement)
      .map((item) => item.variation)
      .expand((i) => i)
      .toList();

  List _movement = [
    {
      "movement": "Plank",
      "alias": "plank",
      "variation": [
        {"variationName": "High Plank"},
        {"variationName": "Forearm Plank"},
      ]
    },
    {
      "movement": "Side Plank",
      "alias": "side plank",
      "variation": [
        {"variationName": "Side Plank Right"},
        {"variationName": "Side Plank Left"},
      ],
    },
  ];
}

class MovementModel {
  MovementModel({
    this.movement,
    this.alias,
    this.variation,
  });

  String movement;
  String alias;
  List<VariationModel> variation;

  factory MovementModel.fromJson(Map<String, dynamic> json) => MovementModel(
        movement: json["movement"],
        alias: json["alias"],
        variation: List<VariationModel>.from(
            json["variation"].map((x) => VariationModel.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "movement": movement,
        "alias": alias,
        "variation": List<dynamic>.from(variation.map((x) => x.toJson())),
      };
}

class VariationModel {
  VariationModel({
    this.variationName,
  });

  String variationName;

  factory VariationModel.fromJson(Map<String, dynamic> json) => VariationModel(
        variationName: json["variationName"],
      );

  Map<String, dynamic> toJson() => {
        "variationName": variationName,
      };
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    List<VariationModel> vList =
        MovementDataSource().getVariationsByMovement("Plank");

    for (int i = 0; i < vList.length; i++) {
      print(vList[i].variationName);
    }
   

    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

工作演示

完整代码2

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

List<MovementModel> movementModelFromJson(String str) =>
    List<MovementModel>.from(
        json.decode(str).map((x) => MovementModel.fromJson(x)));
String movementModelToJson(List<MovementModel> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class MovementDataSource extends ChangeNotifier {
  List<Map> getAll() => _movement;

  List<String> getMovements() => _movement
      .map((map) => MovementModel.fromJson(map))
      .map((item) => item.movement)
      .toList();

// I'd  like this to return a list of movement.variation.variationName

  getVariationsByMovement(String movement) => _movement
      .map((map) => MovementModel.fromJson(map))
      .where((item) => item.movement == movement)
      .map((item) => item.variation)
      .expand((i) => i)
      .toList();

  List _movement = [
    {
      "movement": "Plank",
      "alias": "plank",
      "variation": [
        {"variationName": "High Plank"},
        {"variationName": "Forearm Plank"},
      ]
    },
    {
      "movement": "Side Plank",
      "alias": "side plank",
      "variation": [
        {"variationName": "Side Plank Right"},
        {"variationName": "Side Plank Left"},
      ],
    },
  ];
}

class MovementModel {
  MovementModel({
    this.movement,
    this.alias,
    this.variation,
  });

  String movement;
  String alias;
  List<VariationModel> variation;

  factory MovementModel.fromJson(Map<String, dynamic> json) => MovementModel(
        movement: json["movement"],
        alias: json["alias"],
        variation: List<VariationModel>.from(
            json["variation"].map((x) => VariationModel.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "movement": movement,
        "alias": alias,
        "variation": List<dynamic>.from(variation.map((x) => x.toJson())),
      };
}

class VariationModel {
  VariationModel({
    this.variationName,
  });

  String variationName;

  factory VariationModel.fromJson(Map<String, dynamic> json) => VariationModel(
        variationName: json["variationName"],
      );

  Map<String, dynamic> toJson() => {
        "variationName": variationName,
      };
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    List<VariationModel> vList =
        MovementDataSource().getVariationsByMovement("Plank");

    for (int i = 0; i < vList.length; i++) {
      print(vList[i].variationName);
    }

    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<VariationModel> vList =
        MovementDataSource().getVariationsByMovement("Plank");

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: vList.length,
          itemBuilder: (buildContext, index) {
            return Card(
              child: ListTile(
                title: Text(
                  vList[index].variationName.toString(),
                  style: TextStyle(fontSize: 20),
                ),
                trailing: Icon(Icons.keyboard_arrow_right),
                onTap: () async {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (_) =>
                              SelectDefaultItemPage(variation: vList[index])));
                },
              ),
            );
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class SelectDefaultItemPage extends StatelessWidget {
  final VariationModel variation;
  SelectDefaultItemPage({this.variation});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("test"),
        ),
        body: Text(variation.variationName));
  }
}