zoukankan      html  css  js  c++  java
  • 城市选择选择 / 三级联动

    1.

    city_pickers: ^0.1.9
    

      

    import 'package:city_pickers/city_pickers.dart';
    

    2. 

    class TabsPage extends StatefulWidget{
      @override
      _TabsPageState createState() => new _TabsPageState();
    }
    
    class _TabsPageState extends State<TabsPage> with SingleTickerProviderStateMixin{
      TabController _tabController;
      String cityName;
    
      //初始化,一加载便会触发该方法
      void initState(){
        cityName='杭州';
        super.initState();
        _tabController = new TabController(
          vsync: this,
          length: 2,
        );
      }
    
    Widget build(BuildContext context){
        //初始化
        ScreenUtil.instance = ScreenUtil( 750, height: 1334)..init(context);
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: appBar(),
          ),
        );
      }
         
          Widget appBar(){
        return AppBar(
           centerTitle: true,
            leading: Builder(
                builder: (context) => GestureDetector(
                  child: Padding(
                    padding: EdgeInsets.all(8.0),
                    child: IconButton(
                      icon: Icon(Icons.person),
                      onPressed: null,
                    )
                  ),
                  onTap: () => Scaffold.of(context).openDrawer(),
                ),
              ),
    
            title: Container(
              child:  FlatButton(
                // color: Colors.yellow,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      '$cityName',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: ScreenUtil.getInstance().setSp(30)
                      ),
                      textAlign: TextAlign.left,
                    ),
                    IconButton(
                      alignment: Alignment.centerLeft,
                      icon: Icon(
                        Icons.arrow_drop_down, 
                        color: Color.fromRGBO(46, 48, 56, 1),
                      ),
                      onPressed: (){
                        debugPrint('down');
                      },
                    )
                  ],
                ),
                onPressed: (){
                  show(context);
                },
              ),
            ),
          );
      }
    
      //调用三级联动
      show(BuildContext context) async {
        //Result result = await CityPickers.showCityPicker(
          //context: context,
        //);
      
      //城市列表
       Result result = await CityPickers.showCitiesSelector(
        context: context,
       );

    print(result); setState(() { this.cityName = result.cityName; }); } }

      

      

  • 相关阅读:
    js面向对象的程序设计 --- 上篇(理解对象)
    js基础 之 引用类型
    js基础之--变量 作用域和内存问题
    js基础心得
    一些转载的知识点
    linux打印指定的行的内容
    R画柱形图和箱线图
    Meerkat软件
    bam文件格式说明
    STAR软件的学习
  • 原文地址:https://www.cnblogs.com/xhrr/p/11425608.html
Copyright © 2011-2022 走看看