flutter 在另一个页面中列出

dhxwm5r4  于 2023-02-25  发布在  Flutter
关注(0)|答案(2)|浏览(102)

我是编程新手。
我想呈现列表中的项目名称,在另一个页面的下拉列表中。

class Fermentable {
  final String name;
  final String? country;
  final String category;
  final String type;
  final int color;
  final double ppg;

  Fermentable({
    required this.name,
    required this.country,
    required this.category,
    required this.type,
    required this.color,
    required this.ppg,
  });
}

List<Fermentable> fermentables = [
  Fermentable(
    name: "Malt",
    country: 'Germany',
    category: 'Grain',
    type: 'Malt',
    color: 4,
    ppg: 12,
  ),
...

我该怎么做?我很难想出解决办法🤣

fumotvh3

fumotvh31#

这是你的另一页

class MyAnotherPage extends StatefulWidget {
  final List<Fermentable> fermentables;
  const MyAnotherPage({super.key, required this.fermentables});

  @override
  State<MyAnotherPage> createState() => _MyAnotherPageState();
}

class _MyAnotherPageState extends State<MyAnotherPage> {
  Fermentable? selectedItem;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("${selectedItem?.name}"),
          DropdownButton<Fermentable?>(
            items: widget.fermentables
                .map(
                  (e) => DropdownMenuItem<Fermentable>(
                    child: Text(e.name),
                  ),
                )
                .toList(),
            onChanged: (value) {
              setState(() {
                selectedItem = value;
              });
            },
          )
        ],
      ),
    );
  }
}

在浏览或使用此页面时,请传递以下项目

MyAnotherPage(fermentables: fermentables)

了解更多关于DropdownButton的信息

polhcujo

polhcujo2#

要在另一个页面的下拉列表中显示可发酵项目的名称,您可以执行以下步骤:
1.创建一个带有下拉小部件的新页面,该小部件将显示fermentables的名称。
1.将fermentables列表传递到新页面。
1.将fermentables列表Map到DropdownMenuItem小部件列表,其中每个项的值是Fermentable对象本身,子项是显示Fermentable名称的Text小部件。
1.使用DropdownMenuItem小部件的Map列表作为下拉小部件的items属性。

import 'package:flutter/material.dart';

    class FermentableDropdownPage extends StatelessWidget {
      final List<Fermentable> fermentables;
      FermentableDropdownPage({required this.fermentables});
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Select a Fermentable'),
          ),
          body: Center(
            child: DropdownButton<Fermentable>(
              hint: Text('Select a Fermentable'),
              value: null,
              items: fermentables.map((fermentable) {
                return DropdownMenuItem(
                  value: fermentable,
                  child: Text(fermentable.name),
                );
              }).toList(),
              onChanged: (value) {
                // Do something with the selected fermentable
              },
            ),
          ),
        );
      }
    }

本实施例中,FermentableDropdownPage widget以fermentables列表为参数,通过Mapfermentables列表创建DropdownMenuItem widget列表,创建DropdownButton widget,每个DropdownMenuItem的value属性设置为Fermentable对象本身。这样,当用户从下拉列表中选择一个项目时,您就可以访问所选发酵物的所有属性。

相关问题