Question

我尝试有两个下拉按钮和一个Raised按钮。第一个下拉按钮将是国家列表，第二个下拉按钮将是国家列表，例如-当用户从第一个下拉列表中选择印度时然后从印度的州中填充第二个下拉列表，或者如果用户在第一个下拉列表中选择了USA，则第二个下拉列表将由USA填充，最后一个升高的按钮将根据显示的内容打开指定的页面状态已选择。

我用国家-A，B，C，D制作了一个下拉按钮，但是我无法根据第一个下拉菜单中选择的国家填充第二个下拉按钮，也无法根据选择状态。

    book
    pencil

有人可以帮我解决这个问题吗？。谢谢您

Answer 1

您可以使用地图来管理基于国家/地区的州，然后可以使用该州来导航用户。

以下代码可以帮助您解决问题。

在

中添加此路线

 routes: {
    '/abcPage': (context) => abcPage(),
    '/defPage': (context) => defPage(),
  },

主页：

import 'package:flutter/material.dart';

class Homestack extends StatefulWidget {
  @override
  _HomestackState createState() => _HomestackState();
}

class _HomestackState extends State<Homestack> {

  List<String> _locations = ['A', 'B', 'C', 'D']; // Option 2
  Map<String,String> _CountryState = {
    "aa":"A",
    "aaa":"A",
    "BBB":"B",
    "BB":"B",
    "CC":"C",
    "DDD":"D"
  };

  Map<String,String> _navigate = {
    "aa":"/abcPage",
    "BB":"/defPage"
  };

  List<String> _state =[];

  String _selectedLocation;
  String _selectedState;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: MediaQuery.of(context).size.height * 0.55,
        child: Scaffold(
            body:Center(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("Select a Country",style: TextStyle(fontWeight: FontWeight.bold),),
                    DropdownButton(
                      key: Key("Country"),
                      hint: Text('Please choose a Country'),
                      value: _selectedLocation,
                      onChanged: (newValue) {
                        setState(() {
                          _CountryState.forEach((k,v){
                            print("${k} and ${v}" );
                            _state.clear();
                            if(v==newValue){
                              _state.add(k);
                            }
                          });
                          _selectedLocation = newValue;
                        });
                      },
                      items: _locations.map((location) {
                        return DropdownMenuItem(
                          child: new Text(location),
                          value: location,
                        );
                      }).toList(),
                    ),
                    new Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Text("Select a State",style: TextStyle(fontWeight: FontWeight.bold),),

                        DropdownButton(
                          key: Key("state"),
                          hint: Text('Please choose a State'),
                          value: _selectedState,
                          onChanged: (newValue) {
                            setState(() {
                              _selectedState = newValue;
                            });
                          },
                          items: _state.map((location) {
                            return DropdownMenuItem(
                              child: new Text(location),
                              value: location,
                            );
                          }).toList(),
                        ),
                      ],
                    ),
                    new Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        new RaisedButton(
                          padding: const EdgeInsets.all(8.0),
                          textColor: Colors.white,
                          color: Colors.blue,
                          onPressed: (){
                            Navigator.pushNamed(context,_navigate[_selectedState] );
                          },
                          child: new Text("OK"),
                        ),
                      ],
                    )
                  ],
                )
            )
        )
    );

  }
}

class abcPage extends StatefulWidget {
  @override
  _abcPageState createState() => _abcPageState();
}

class _abcPageState extends State<abcPage> {
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Container(
          color: Colors.green,
        ));
  }
}

class defPage extends StatefulWidget {
  @override
  _defPageState createState() => _defPageState();
}

class _defPageState extends State<defPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

从第一个下拉列表的值中获取第二个下拉列表

1 个答案: