Re:在flutter中创建一个下拉按钮

时间:2017-09-12 06:46:32

标签: dart flutter

我在构建中使用了DropDownButton,但我希望箭头显示在最后,并且下拉项目将从箭头显示,但在我的应用程序中,它们从顶部显示。我已附上截图供您参考。

请告诉我如何更改此内容,或者是否有其他方法可以简单地创建一个下拉菜单。

非常感谢一个例子。

请原谅我的代码,因为我是编程新手,欢迎任何意见或建议。

非常感谢, 鳅。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:ui';

void main(){
    runApp(new BranchSetup());
      }

class BranchSetup extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
         return new _BranchSetupState();
          }
       } 

    class _BranchSetupState extends State<BranchSetup> with 
                                WidgetsBindingObserver {

     @override
           Widget build(BuildContext context){
           return new MaterialApp(
              theme: new ThemeData(
                  primaryColor: const Color(0xFF229E9C),
                                ),
              title: 'Branch Setup',
              home: new Scaffold(
              body: new Container(
              child: new ListView(
                children: <Widget>[
                 new Container(
                   margin: const EdgeInsets.all(16.0),
                    child: new Row(
                     children: <Widget>[
                      new Expanded(
                        child: new TextFormField(
            decoration: new InputDecoration([enter image description here][1]                           
                       labelText: 'Branch Name',
                   ),
                ),
              ),
            ],
          ),
         ),
          new Container(
            margin: const EdgeInsets.all(16.0),
            child:
              new DropdownButton<String>(
                items: <String>['Mens','Womans']
                      .map((String value) {
                    return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(value),
                    );
                  }
                  ).toList(),
               onChanged: null,
                ),
            ),

          ],
        ),
        ),
     ),
    );
   }

  }

2 个答案:

答案 0 :(得分:7)

这看起来像Flutter中的一个错误。我提交了issue

与此同时,您可以将DropdownButton包裹在Column中来解决此问题。

screenshot

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new DemoApp()));
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('DropdownButton Example')),
      body: new ListView(
        children: [
          new Column(
            children: <Widget>[
              new DropdownButton<String>(
                items: <String>['Foo', 'Bar'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}

答案 1 :(得分:1)

您可以试用我创建的插件:flutter_search_panel。不是下拉插件,但是您可以显示具有搜索功能的项目。

使用以下代码来使用小部件:

    FlutterSearchPanel(
        padding: EdgeInsets.all(10.0),
        selected: 'a',
        title: 'Demo Search Page',
        data: ['This', 'is', 'a', 'test', 'array'],
        icon: new Icon(Icons.label, color: Colors.black),
        color: Colors.white,
        textStyle: new TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0, decorationStyle: TextDecorationStyle.dotted),
        onChanged: (value) {
          print(value);
        },
   ),