Flutterweb-從對話框上的DropDownList（ComboBox）獲取資料（回傳值）-有解無憂

我有一個小的 Flutter Web 應用程式（它像移動應用程式一樣撰寫，但用于 Web 目的），帶有一個 main.dart 檔案和一個帶有自定義對話框的 dialog.dart 檔案。在此對話框中，我有三個下拉串列（有時稱為 ComboBoxes）。對話框按預期外觀和作業。但是我不知道如何從對話框中讀取/訪問當前選擇的下拉串列值（來自代碼的對話框部分）。通過單擊“確定”按鈕，我需要打開正確的頁面并根據下拉串列中的選定值填充內容。

這是帶有三個下拉串列的自定義對話框視窗的代碼：

'dialog.dart'：

import 'package:flutter/material.dart';

class CustomDialogBox extends StatefulWidget {
  final String title, descriptions, text;

  const CustomDialogBox({
    Key? key,
    required this.title,
    required this.descriptions,
    required this.text,
  }) : super(key: key);

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

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(
      children: <Widget>[
        Container(
          padding:
              const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
          margin: const EdgeInsets.only(top: 40),
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                height: 80,
              ),
              Text(
                widget.title,
                style:
                    const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
              ),
              const SizedBox(
                height: 15,
              ),
              Text(
                widget.descriptions,
                style: const TextStyle(fontSize: 14),
                textAlign: TextAlign.center,
              ),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list1),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list2),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(listType: list3),
              Align(
                alignment: Alignment.bottomRight,
                child: MaterialButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      widget.text,
                      style: const TextStyle(fontSize: 18, color: Colors.white),
                    )),
              ),
            ],
          ),
        ),
        Positioned(
          left: 30,
          right: 30,
          top: 0,
          child: CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 80,
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(75)),
                child: Image.network(
                    "https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    width: 120,
                    height: 120,
                    fit: BoxFit.fill)),
          ),
        ),
      ],
    );
  }
}

const List<String> list1 = <String>[
  'One',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Eleven',
  'Twelve'
];
const List<String> list2 = <String>[
  'Black',
  'Red',
  'Olive',
  'DarkOliveGreen',
  'MediumAquamarine',
  'DarkSeaGreen',
  'LightSeaGreen',
  'DarkCyan',
  'Teal',
];

const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key, required this.listType});

  final List<String> listType;

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 10,
      style: const TextStyle(color: Colors.blue),
      underline: Container(
        height: 2,
        color: Colors.blue,
      ),
      onChanged: (String? value) {
        setState(() {
          dropdownValue = value as String;
        });
      },
      items: widget.listType.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

uj5u.com熱心網友回復：

您可以使用回呼函式作為 DropdownButtonExample 的引數，并將下拉選單的值存盤在頂部小部件的狀態中。

例如

import 'package:flutter/material.dart';

class CustomDialogBox extends StatefulWidget {
  final String title, descriptions, text;

  const CustomDialogBox({
    Key? key,
    required this.title,
    required this.descriptions,
    required this.text,
  }) : super(key: key);

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

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    var dropdown1value = "";
    var dropdown2value = "";
    var dropdown3value = "";
    return Stack(
      children: <Widget>[
        Container(
          padding:
              const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
          margin: const EdgeInsets.only(top: 40),
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                height: 80,
              ),
              Text(
                widget.title,
                style:
                    const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
              ),
              const SizedBox(
                height: 15,
              ),
              Text(
                widget.descriptions,
                style: const TextStyle(fontSize: 14),
                textAlign: TextAlign.center,
              ),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown1value = value;
                    });
                  },
                  listType: list1),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown2value = value;
                    });
                  },
                  listType: list2),
              const SizedBox(
                height: 30,
              ),
              DropdownButtonExample(
                  onChanged: (value) {
                    setState(() {
                      dropdown3value = value;
                    });
                  },
                  listType: list3),
              Align(
                alignment: Alignment.bottomRight,
                child: MaterialButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      widget.text,
                      style: const TextStyle(fontSize: 18, color: Colors.white),
                    )),
              ),
            ],
          ),
        ),
        Positioned(
          left: 30,
          right: 30,
          top: 0,
          child: CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 80,
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(75)),
                child: Image.network(
                    "https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
                    width: 120,
                    height: 120,
                    fit: BoxFit.fill)),
          ),
        ),
      ],
    );
  }
}

const List<String> list1 = <String>[
  'One',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Eleven',
  'Twelve'
];
const List<String> list2 = <String>[
  'Black',
  'Red',
  'Olive',
  'DarkOliveGreen',
  'MediumAquamarine',
  'DarkSeaGreen',
  'LightSeaGreen',
  'DarkCyan',
  'Teal',
];

const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];

class DropdownButtonExample extends StatefulWidget {
  final Function(String) onChanged;

  const DropdownButtonExample(
      {Key? key, required this.listType, required this.onChanged});

  final List<String> listType;

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 10,
      style: const TextStyle(color: Colors.blue),
      underline: Container(
        height: 2,
        color: Colors.blue,
      ),
      onChanged: (String? value) {
        widget.onChanged(value ?? "");
      },
      items: widget.listType.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531597.html

標籤：扑网络

上一篇：MVC表單資料無法系結到模型

下一篇：匹配URI中自定義引數的正則運算式