簡體   English   中英

Flutter DropdownButton 在選擇選項時顯示 label

[英]Flutter DropdownButton show label when option is selected

可以Dropdown Button

 return DropdownButton<String>(
          items: <String>['Foo', 'Bar'].map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (_) {},
        );

TextFormField中有類似於裝飾用戶的東西:

      TextFormField(
        controller: _titleController,
        decoration: InputDecoration(labelText: 'Input'),
        validator: (String value) {
          if (value != null && value.isEmpty) {
            return 'Please enter some text';
          }
        },
        style: Theme.of(context).textTheme.title,
      ),

當在上面的 TextFormField 中寫入內容時,會顯示Input一詞。 像這樣:

在此處輸入圖像描述

用 DropdownButtonFormField 替換 DropdownButton:

https://api.flutter.dev/flutter/material/DropdownButtonFormField-class.html

將 DropdownButton 更改為 DropdownButtonFormField 並添加此裝飾....

              decoration: InputDecoration(
                filled: true,
                fillColor: Hexcolor('#ecedec'),
                labelText: 'Occupation',
                border: new CustomBorderTextFieldSkin().getSkin(),
              ),

復制粘貼,看看魔法
我用材料設計完成了 flutter 下拉菜單

    Padding(
          padding: const EdgeInsets.all(9.0),
          child: InputDecorator(
            decoration: InputDecoration(
              labelText: 'Priority',
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.0)),
              contentPadding: EdgeInsets.all(10),
            ),
            child: ButtonTheme(
              materialTapTargetSize: MaterialTapTargetSize.padded,
              child: DropdownButton<String>(
                hint: const Text("Priority"),
                isExpanded: true,
                value: dropdownValue,
                elevation: 16,
                underline: DropdownButtonHideUnderline(
                  child: Container(),
                ),
                onChanged: (String? newValue) {
                  setState(() {
                    dropdownValue = newValue!;
                  });
                },
                items: <String>['One', 'Two', 'Free', 'Four']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
          ),
        ),
    

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM