flutter 下的DropDownList

我是一个flutter初学者，最近在研究Flutter技术框架，为了深入了解这个技术框架，首先得从基础的知识学起，所以我想自己学习的点点滴滴记录在此，方便自己查阅。

image.png image.png

上图为自己想要实现的功能，点击下拉框就可以显示数据，

import 'dart:html';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const styles = TextStyle(
      color: Colors.yellow,
      fontSize: 20,
      fontFamily: "yahei",
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.dashed
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo Home Page"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: "Open shopping cart",
            onPressed: (){
              print("Shopping cart opened");
            },
          )
        ],
      ),
      body: Column(
        children: [
          MyDropDownButton()
        ],
      )
    );
  }
}


class MyDropDownButton extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyDropDownButton();
  }

}

class _MyDropDownButton extends State<MyDropDownButton>{

  var selectItemValue;  // 选择不同的选项，在下拉框选项中显示
  // 造数据 
  List<DropdownMenuItem> getCityList() {
    List<DropdownMenuItem> cityList = [];
    cityList.add(DropdownMenuItem(child: Text("上海"),value: "shanghai"));
    cityList.add(DropdownMenuItem(child: Text("北京"),value: "beijing"));
    cityList.add(DropdownMenuItem(child: Text("广州"),value: "guangzhou"));
    cityList.add(DropdownMenuItem(child: Text("深圳"),value: "shenzhen"));
    return cityList;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [
        DropdownButton(
          items: getCityList(),
          hint: Text("请选择一个城市"),   // 提示信息
          value: selectItemValue,    // 初始值
          onChanged: (value){
            setState(() {
              this.selectItemValue = value;
            });
          },
          isExpanded: true,  // 撑满全行
          iconSize: 48,  // 图标大小
          style: TextStyle(color: Colors.purple),   // 文字样式
        )
      ],
    );
  }
}