如何在CupertinoPicker Widget中接收对象列表

Question

我想将一个对象列表传递给一个CupertinoPicker，但是它只接收一个字符串列表，如何传递它呢？

如何接收此数据对象并正确处理将每个子对象转换为对象字符串，则需要将每个对象名称添加到字符串列表中。

import 'package:flutter/cupertino.dart';

class MainCupertinoPicker extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _StateCupertinoPicker();
  }

}

class _StateCupertinoPicker extends State<MainCupertinoPicker>{

  int _selectedFruit = 0;
  // This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoPicker.
  void _showDialog(Widget child, {required Text}) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) => Container(
        height: 216,
        padding: const EdgeInsets.only(top: 6.0),
        // The Bottom margin is provided to align the popup above the system navigation bar.
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // Provide a background color for the popup.
        color: CupertinoColors.systemBackground.resolveFrom(context),
        // Use a SafeArea widget to avoid system overlaps.
        child: SafeArea(
          top: false,
          child: child,
        ),
      )
    );
  }

  double _kItemExtent = 32.0;
  List<String> _fruitNames = <String>[
    'Crato',
    'Juazeiro',
    'Fortaleza'
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Selecione o municipio: ',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold
                ),
              ),
              CupertinoButton(
                padding: EdgeInsets.zero,
                // Display a CupertinoPicker with list of fruits.
                onPressed: () => _showDialog(
                  CupertinoPicker(
                    magnification: 1.22,
                    squeeze: 1.2,
                    useMagnifier: true,
                    itemExtent: _kItemExtent,
                    // This is called when selected item is changed.
                    onSelectedItemChanged: (int selectedItem) {
                      setState(() {
                        _selectedFruit = selectedItem;
                        print(_selectedFruit);
                      });
                    },
                    children:
                        List<Widget>.generate(_fruitNames.length, (int index) {
                      return Center(
                        child: Text(
                          _fruitNames[index],
                        ),
                      );
                    }),
                  ), Text: null,
                ),
                // This displays the selected fruit name.
                child: Text(
                  _fruitNames[_selectedFruit],
                  style: const TextStyle(
                    fontSize: 22.0,
                  ),
                ),
              ),
            ],
          ),
    );
  }
}

我需要将对象字符串名称添加到_fruitNames列表中，然后向用户显示该列表，并且当用户选择名称时，我需要返回完整的对象。

这是我想要接收的东西

class Tenant {
  int id;
  String name;
  String siafi;
  String url;
  String username;
  String password;
  String driverClassName;
  bool initialize;

  Tenant({required this.id, required this.name, required this.siafi, required this.url, required this.driverClassName, required this.username, required this.initialize, required this.password});

  factory Tenant.fromJson(Map<String, dynamic> json){
    return Tenant(
      id: json["id"], 
      name: json["name"], 
      siafi: json["siafi"], 
      url: json["url"], 
      driverClassName: json["driverClassName"], 
      username: json["username"], 
      initialize: json["initialize"], 
      password: json["password"]
    );
  }
}```

Answer 1

您不需要仅仅为了在CupertinoPicker中显示该对象的名称而创建另一个列表，您可以使用相同的列表，并在_selectedfruit的帮助下访问选定的对象

您可以通过以下代码实现您的预期行为：-

class MainCupertinoPicker extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _StateCupertinoPicker();
  }
}

class _StateCupertinoPicker extends State<MainCupertinoPicker> {
  int _selectedFruit = 0;
  // This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoPicker.
  void _showDialog(Widget child, {required Text}) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) => Container(
        height: 216,
        padding: const EdgeInsets.only(top: 6.0),
        // The Bottom margin is provided to align the popup above the system navigation bar.
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // Provide a background color for the popup.
        color: CupertinoColors.systemBackground.resolveFrom(context),
        // Use a SafeArea widget to avoid system overlaps.
        child: SafeArea(
          top: false,
          child: child,
        ),
      ),
    );
  }

  final double _kItemExtent = 32.0;

  /// this is the the list of your your tenant object which may be static or may be coming from api as per your usecase
  List<Tenant> _tenants = [
  Tenant(
    id: 1,
    name: "Name 1",
    siafi: "Xyz",
    url: "Xyz",
    driverClassName: "Xyz",
    username: "Xyz",
    initialize: true,
    password: "Xyz",
  ),
  Tenant(
    id: 1,
    name: "Name 2",
    siafi: "Xyz",
    url: "Xyz",
    driverClassName: "Xyz",
    username: "Xyz",
    initialize: true,
    password: "Xyz",
  ),
  Tenant(
    id: 1,
    name: "Name 3",
    siafi: "Xyz",
    url: "Xyz",
    driverClassName: "Xyz",
    username: "Xyz",
    initialize: true,
    password: "Xyz",
  ),
  Tenant(
    id: 1,
    name: "Name 4",
    siafi: "Xyz",
    url: "Xyz",
    driverClassName: "Xyz",
    username: "Xyz",
    initialize: true,
    password: "Xyz",
  ),
  Tenant(
    id: 1,
    name: "Name 5",
    siafi: "Xyz",
    url: "Xyz",
    driverClassName: "Xyz",
    username: "Xyz",
    initialize: true,
    password: "Xyz",
  )
];


  /// no need to make another list for just showing modal popup
  // final List<String> _fruitNames = <String>['Crato', 'Juazeiro', 'Fortaleza'];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'Selecione o municipio: ',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          CupertinoButton(
            padding: EdgeInsets.zero,
            // Display a CupertinoPicker with list of fruits.
            onPressed: () => _showDialog(
              CupertinoPicker(
                magnification: 1.22,
                squeeze: 1.2,
                useMagnifier: true,
                itemExtent: _kItemExtent,
                // This is called when selected item is changed.
                onSelectedItemChanged: (int selectedItem) {
                  setState(
                    () {
                      _selectedFruit = selectedItem;
                      if (kDebugMode) {
                        print(_tenants[_selectedFruit]);
                        print(_tenants[_selectedFruit].name);
                      }
                    },
                  );
                },
                children: List<Widget>.generate(
                  _tenants.length,
                  (int index) {
                    return Center(
                      child: Text(
                        _tenants[index].name,
                      ),
                    );
                  },
                ),
              ),
              Text: null,
            ),
            // This displays the selected fruit name.
            child: Text(
              _tenants[_selectedFruit].name,
              style: const TextStyle(
                fontSize: 22.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}


class Tenant {
  int id;
  String name;
  String siafi;
  String url;
  String username;
  String password;
  String driverClassName;
  bool initialize;

  Tenant(
      {required this.id,
      required this.name,
      required this.siafi,
      required this.url,
      required this.driverClassName,
      required this.username,
      required this.initialize,
      required this.password});

  factory Tenant.fromJson(Map<String, dynamic> json) {
    return Tenant(
        id: json["id"],
        name: json["name"],
        siafi: json["siafi"],
        url: json["url"],
        driverClassName: json["driverClassName"],
        username: json["username"],
        initialize: json["initialize"],
        password: json["password"]);
  }

  @override
  String toString() {
    return "id: $id, name: $name, siafi: $siafi, url: $url, driverClassName: $driverClassName, username: $username, initialize: $initialize, password: $password";
  }
}

Answer 2

这是修改过的代码，

我创建了对象列表，为了简化，我创建了自己的名为Person的对象

List<Person> personList = <Person>[Person(id:1, name:'Alan'), Person(id:2, name:'Ben'), Person(id:3, name:'Cat')];
// whereas
class Person{
  String name;
  int id;
  Person({required this.id, required this.name, });
  factory Person.fromJson(Map<String, dynamic> json){
    return Person(
      id: json["id"], 
      name: json["name"],
    );
  }
}

您可以使用personList[index].name访问人名。这样你的代码就变成

        CupertinoButton(
            padding: EdgeInsets.zero,
            // Display a CupertinoPicker with list of fruits.
            onPressed: () => _showDialog(
              CupertinoPicker(
                magnification: 1.22,
                squeeze: 1.2,
                useMagnifier: true,
                itemExtent: kItemExtent,
                // This is called when selected item is changed.
                onSelectedItemChanged: (int selectedItem) {
                  
                },
                children:
                    List<Widget>.generate(personList.length, (int index) {
                  return Center(
                    child: Text(
                      personList[index].name,
                    ),
                  );
                }),
              ),
              context,
              Text: null,
            ),
            // This displays the selected fruit name.
            child: Text(
              personList[_selectedFruit].name,
              style: const TextStyle(
                fontSize: 22.0,
              ),
            ),
          ),

在列表中有一个完整的对象，您可以根据索引值选择对象并返回整个对象，如下面的personList[selectedIndex]