Flutter 下拉文本字段

p4tfgftt  于 2022-12-24  发布在  Flutter
关注(0)|答案(6)|浏览(180)

我对Flutter还是新手。有材料下拉列表文本字段的例子吗?我在材料文本字段上看到过这个例子,但是我在文档中没有找到关于如何实现这个的任何地方。谢谢你的帮助。

58wvjzkj

58wvjzkj1#

更新日期:

具有下拉列表的文本表单域

var _currencies = [
    "Food",
    "Transport",
    "Personal",
    "Shopping",
    "Medical",
    "Rent",
    "Movie",
    "Salary"
  ];

 FormField<String>(
          builder: (FormFieldState<String> state) {
            return InputDecorator(
              decoration: InputDecoration(
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.redAccent, fontSize: 16.0),
                  hintText: 'Please select expense',
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))),
              isEmpty: _currentSelectedValue == '',
              child: DropdownButtonHideUnderline(
                child: DropdownButton<String>(
                  value: _currentSelectedValue,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _currentSelectedValue = newValue;
                      state.didChange(newValue);
                    });
                  },
                  items: _currencies.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                ),
              ),
            );
          },
        )

希望这有帮助!

qni6mghb

qni6mghb2#

您需要下拉按钮或下拉按钮窗体字段https://api.flutter.dev/flutter/material/DropdownButton-class.html
和下拉菜单项https://api.flutter.dev/flutter/material/DropdownMenuItem-class.html

return DropdownButtonFormField(
  items: categories.map((String category) {
    return new DropdownMenuItem(
      value: category,
      child: Row(
        children: <Widget>[
          Icon(Icons.star),
          Text(category),
        ],
       )
      );
     }).toList(),
     onChanged: (newValue) {
       // do other stuff with _category
       setState(() => _category = newValue);
     },
     value: _category,
     decoration: InputDecoration(
       contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 20),
         filled: true,
         fillColor: Colors.grey[200],
         hintText: Localization.of(context).category, 
         errorText: errorSnapshot.data == 0 ? Localization.of(context).categoryEmpty : null),
       );
5vf7fwbs

5vf7fwbs3#

其他的答案已经完全描述了你需要什么,但是这里有一个例子,把所有的都放在一起,这是一个可重用的下拉文本域小部件,允许你指定任何类型的选项列表(而不失去dart漂亮的类型系统)。

class AppDropdownInput<T> extends StatelessWidget {
  final String hintText;
  final List<T> options;
  final T value;
  final String Function(T) getLabel;
  final void Function(T) onChanged;

  AppDropdownInput({
    this.hintText = 'Please select an Option',
    this.options = const [],
    this.getLabel,
    this.value,
    this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return FormField<T>(
      builder: (FormFieldState<T> state) {
        return InputDecorator(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(
                horizontal: 20.0, vertical: 15.0),
            labelText: hintText,
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
          ),
          isEmpty: value == null || value == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<T>(
              value: value,
              isDense: true,
              onChanged: onChanged,
              items: options.map((T value) {
                return DropdownMenuItem<T>(
                  value: value,
                  child: Text(getLabel(value)),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }
}

你可以这样使用它:

AppDropdownInput(
            hintText: "Gender",
            options: ["Male", "Female"],
            value: gender,
            onChanged: (String value) {
              setState(() {
                gender = value;
                // state.didChange(newValue);
              });
            },
            getLabel: (String value) => value,
          )
ylamdve6

ylamdve64#

根据Jeff Frazier的回答,您可以使用DropdownButton2包中的DropdownButton2或DropdownButtonFormField2进行更多的自定义。它基于Flutter的核心DropdownButton,具有更多的选项,您可以根据需要进行自定义。

b5buobof

b5buobof5#

This answer提供了一个使用DropdownButtonFormField的示例,DropdownButtonFormField是一个方便的小部件,它将DropdownButton小部件 Package 在FormField中。
如果您正在使用材料表单字段,则是理想选择

ecfsfe2w

ecfsfe2w6#

“下拉”可能不是您用来描述材料设计示例中引用的文本字段设计的正确单词。
以下是如何在Flutter中实现它:

import 'package:flutter/material.dart';

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

class TextFieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Field Example',
      home: HomePage(),
      theme: ThemeData(
        primaryColor: Colors.deepPurple,
        accentColor: Colors.white,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            //Material example
            TextField(
              decoration: InputDecoration(
                  filled: true,
                  hintText: 'Enter text',
                  labelText: 'Default text field'),
              controller: new TextEditingController(),
            ),
            SizedBox(
              height: 16.0,
            ),
            //Alternate
            TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter text',
                  labelText: 'Text field alternate'),
              controller: new TextEditingController(),
            ),
          ],
        ),
      ),
    );
  }
}

此示例应用程序包含两个不同的文本字段设计示例,它们可以收缩和展开关联的标签。

Gif of sample app - click here

相关问题