Question

该下拉菜单并未将其显示为所选内容，而是继续显示，好像什么都没有选择一样。请帮助我解决问题。

我创建了这个自定义的下拉小部件以用于多种用途...

class _AddItemWidgetState extends State<AddItemWidget> {
  static const categoryTypes = [ 
    "SL",
    "KA",
  ];
  static const subCategoryType = [
    "10KG",
    "20KG",
    "5KG",
  ];
  static const Type = [
    "Big Tray",
    "Small Tray",
  ];

  String categorySelectedValue;
  String subCategorySelectedValue;
  String itemType;

  Widget categoryFieldWidget(
      {String name, List<String> nameList, String selectedValue}) {
    return Container(
      height: 49,
      child: FormField<String>(
        builder: (FormFieldState<String> state) {
          return InputDecorator(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10, right: 10),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                icon: Icon(Icons.keyboard_arrow_down),
                hint: Text(
                  name,
                ),
                onChanged: (String newValue) {
                  setState(() {
                    selectedValue = newValue;
                  });
                  print(selectedValue);
                },
                value: selectedValue,
                isDense: true,
                items: nameList.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
          );
        },
      ),
    );
  }

用法：-

但是当我在其他窗口小部件中使用此自定义下拉窗口小部件时，该值未显示在Ui上。 “ categorySelectedValue”的值发生了变化...但未在用户界面上显示...

Expanded(
   child: categoryFieldWidget(
            name: "Category", 
            nameList: categoryTypes,
            selectedValue: categorySelectedValue)),

Answer 1

只需查看此示例

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  static const categoryTypes = [
    "SL",
    "KA",
  ];
  static const subCategoryType = [
    "10KG",
    "20KG",
    "5KG",
  ];
  static const itemtype = [
    "Big Tray",
    "Small Tray",
  ];

  String categorySelectedValue;
  String subCategorySelectedValue;
  String itemType;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the category callbackValue : $value');
                },
                name: 'Category',
                list: categoryTypes,
                selectedValue: categorySelectedValue,
              ),
            ),
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the subcategory callbackValue : $value');
                },
                name: 'SubCategory',
                list: subCategoryType,
                selectedValue: subCategorySelectedValue,
              ),
            ),
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the type callbackValue : $value');
                },
                name: 'Type',
                list: itemtype,
                selectedValue: itemType,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

typedef void StringCallback(String val);

class CustomDropDown extends StatefulWidget {
  final StringCallback callback;
  final List<String> list;
  final String name;
  final String selectedValue;

  const CustomDropDown(
      {Key key, this.list, this.name, this.selectedValue, this.callback})
      : super(key: key);

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

class _CustomDropDownState extends State<CustomDropDown> {
  List<String> currentList = List();
  String name;
  String currentSelectedValue;

  @override
  void initState() {
    super.initState();
    currentList = widget.list;
    name = widget.name;
    currentSelectedValue = widget.selectedValue;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 49,
      child: FormField<String>(
        builder: (FormFieldState<String> state) {
          return InputDecorator(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10, right: 10),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                icon: Icon(Icons.keyboard_arrow_down),
                hint: Text(
                  widget.name,
                ),
                onChanged: (String newValue) {
                  print('This is the value on select $newValue');
                  setState(() {
                    currentSelectedValue = newValue;
                  });
                  widget.callback(currentSelectedValue);
                },
                value: currentSelectedValue,
                isDense: true,
                items: currentList.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
          );
        },
      ),
    );
  }
}

让我知道它是否有效。

Flutter DropDownbutton不显示所选值

1 个答案: