flutter选择国家或地区的电话号码区号

news2024/11/13 12:53:43

在这里插入图片描述

1.国家区号列表(带字母索引侧边栏)

import 'package:generated/l10n.dart';
import 'package:widget/login/area_index_bar_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LoginAreaListWidget extends StatefulWidget {
  
  State<StatefulWidget> createState() => _LoginAreaListWidgetState();
}

class _LoginAreaListWidgetState extends State<LoginAreaListWidget> {
  // 字典里面放item和高度对应的数据
  final Map _groupOffsetMap = {};

  ScrollController _scrollController;

  final List<Areas> _listDatas = [];

  
  void initState() {
    super.initState();
    _listDatas.addAll(datas);

    var _groupOffset = 80.h * (_headerData.length - 1) + 40.h;
    //经过循环计算,将每一个头的位置算出来,放入字典
    for (int i = 0; i < _listDatas.length; i++) {
      if (_listDatas[i].name == null) {
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: _groupOffset});
        _groupOffset += 40.h;
      } else {
        _groupOffset += 80.h;
      }
    }

    _scrollController = ScrollController();
  }

  final List<Areas> _headerData = [
    Areas(),
    Areas(areaCode: 86, name: S.current.c1),
    Areas(areaCode: 852, name: S.current.c2),
    Areas(areaCode: 1, name: S.current.c3),
    Areas(areaCode: 44, name: S.current.c4),
    Areas(areaCode: 1, name: S.current.c5),
    Areas(areaCode: 61, name: S.current.c6),
    Areas(areaCode: 49, name: S.current.c7),
    Areas(areaCode: 81, name: S.current.c8),
  ];

  Widget _itemForRow(BuildContext context, int index) {
    // 系统cell
    if (index < _headerData.length) {
      if (index == 0) {
        return _FriendsCell(
          name: S.current.remen,
          groupTitle: S.current.remen,
        );
      }
      return _FriendsCell(
        areaCode: _headerData[index].areaCode,
        name: _headerData[index].name,
        hideBorder: index == _headerData.length - 1 ? true : false,
      );
    }

    int length = _headerData.length;
    //显示剩下的cell
    //如果当前和上一个cell的indexLetter一样,就不显示
    bool _hideIndexLetter = (index - length > 0 &&
        _listDatas[index - length].indexLetter ==
            _listDatas[index - (length + 1)].indexLetter);
    // 如果当前和下一个cell的indexLetter不一样,就不显示border
    bool _hideBorder = index + 1 == _listDatas.length + _headerData.length
        ? true
        : (index - length > 0 &&
            _listDatas[index - length].indexLetter !=
                _listDatas[index - (length - 1)].indexLetter);
    return _FriendsCell(
        areaCode: _listDatas[index - length].areaCode,
        name: _listDatas[index - length].name,
        groupTitle:
            _hideIndexLetter ? null : _listDatas[index - length].indexLetter,
        hideBorder: _hideBorder);
  }

  
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          child: ListView.builder(
            itemBuilder: _itemForRow,
            controller: _scrollController,
            itemCount: _listDatas.length + _headerData.length,
          ),
        ),
        Positioned(
            top: 0,
            right: 0,
            bottom: 0,
            child: Container(
              width: 100.w,
              child: AreaIndexBarWidget(
                indexBarCallBack: (String str) {
                  if (_groupOffsetMap[str] != null) {
                    _scrollController.animateTo(_groupOffsetMap[str],
                        duration: Duration(milliseconds: 10),
                        curve: Curves.easeIn);
                  }
                },
              ),
            ))
      ],
    );
  }
}

class _FriendsCell extends StatelessWidget {
  final int areaCode;
  final String name;
  final String groupTitle;
  final bool hideBorder;

  const _FriendsCell(
      {this.areaCode, this.name, this.groupTitle, this.hideBorder}); //首字母大写

  
  Widget build(BuildContext context) {
    return groupTitle != null
        ? Container(
            color: Colors.black.withOpacity(0.1),
            padding: EdgeInsets.only(left: 40.w),
            height: 40.h,
            alignment: Alignment.centerLeft,
            child: Text(
              groupTitle,
              style: TextStyle(fontSize: 24.sp, color: Color(0xff333333)),
            ),
          )
        : InkWell(
            onTap: () {
              Navigator.pop(context, areaCode);
            },
            child: Container(
              color: Colors.white,
              height: 80.h,
              padding: EdgeInsets.only(left: 40.w, right: 100.w),
              child: Container(
                decoration: BoxDecoration(
                    border: hideBorder
                        ? Border()
                        : Border(
                            bottom: BorderSide(
                                width: 1,
                                color: Color(0xff5dc8b6).withOpacity(0.3)))),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      name,
                      style:
                          TextStyle(fontSize: 28.sp, color: Color(0xff333333)),
                    ),
                    Text(
                      '+$areaCode',
                      style:
                          TextStyle(fontSize: 28.sp, color: Color(0xff333333)),
                    )
                  ],
                ),
              ),
            ),
          );
  }
}

class Areas {
  final int areaCode;
  final String name;
  final String indexLetter; //首字母大写

  Areas({this.areaCode, this.name, this.indexLetter});
}

List<Areas> datas = [
  Areas(indexLetter: 'A'),
  Areas(areaCode: 43, name: S.current.c9, indexLetter: 'A'),
  Areas(areaCode: 61, name: S.current.c10, indexLetter: 'A'),
  Areas(areaCode: 20, name: S.current.c11, indexLetter: 'A'),
  Areas(areaCode: 372, name: S.current.c12, indexLetter: 'A'),
  Areas(areaCode: 353, name: S.current.c13, indexLetter: 'A'),
  Areas(areaCode: 971, name: S.current.c14, indexLetter: 'A'),
  Areas(indexLetter: 'B'),
  Areas(areaCode: 32, name: S.current.c15, indexLetter: 'B'),
  Areas(areaCode: 55, name: S.current.c16, indexLetter: 'B'),
  Areas(areaCode: 359, name: S.current.c17, indexLetter: 'B'),
  Areas(areaCode: 354, name: S.current.c18, indexLetter: 'B'),
  Areas(areaCode: 92, name: S.current.c19, indexLetter: 'B'),
  Areas(areaCode: 507, name: S.current.c20, indexLetter: 'B'),
  Areas(areaCode: 595, name: S.current.c21, indexLetter: 'B'),
  Areas(areaCode: 51, name: S.current.c22, indexLetter: 'B'),
  Areas(areaCode: 48, name: S.current.c23, indexLetter: 'B'),
  Areas(areaCode: 1787, name: S.current.c24, indexLetter: 'B'),
  Areas(indexLetter: 'D'),
  Areas(areaCode: 49, name: S.current.c25, indexLetter: 'D'),
  Areas(areaCode: 45, name: S.current.c26, indexLetter: 'D'),
  Areas(areaCode: 1809, name: S.current.c27, indexLetter: 'D'),
  Areas(areaCode: 228, name: S.current.c28, indexLetter: 'D'),
  Areas(indexLetter: 'E'),
  Areas(areaCode: 593, name: S.current.c29, indexLetter: 'E'),
  Areas(areaCode: 7, name: S.current.c30, indexLetter: 'E'),
  Areas(indexLetter: 'F'),
  Areas(areaCode: 33, name: S.current.c31, indexLetter: 'F'),
  Areas(areaCode: 679, name: S.current.c32, indexLetter: 'F'),
  Areas(areaCode: 358, name: S.current.c33, indexLetter: 'F'),
  Areas(areaCode: 63, name: S.current.c34, indexLetter: 'F'),
  Areas(indexLetter: 'G'),
  Areas(areaCode: 995, name: S.current.c35, indexLetter: 'G'),
  Areas(areaCode: 1473, name: S.current.c36, indexLetter: 'G'),
  Areas(indexLetter: 'H'),
  Areas(areaCode: 82, name: S.current.c37, indexLetter: 'H'),
  Areas(areaCode: 31, name: S.current.c38, indexLetter: 'H'),
  Areas(indexLetter: 'J'),
  Areas(areaCode: 1, name: S.current.c39, indexLetter: 'J'),
  Areas(areaCode: 420, name: S.current.c40, indexLetter: 'J'),
  Areas(indexLetter: 'K'),
  Areas(areaCode: 385, name: S.current.c41, indexLetter: 'K'),
  Areas(areaCode: 974, name: S.current.c42, indexLetter: 'K'),
  Areas(indexLetter: 'L'),
  Areas(areaCode: 856, name: S.current.c43, indexLetter: 'L'),
  Areas(areaCode: 371, name: S.current.c44, indexLetter: 'L'),
  Areas(areaCode: 423, name: S.current.c45, indexLetter: 'L'),
  Areas(areaCode: 370, name: S.current.c46, indexLetter: 'L'),
  Areas(areaCode: 352, name: S.current.c47, indexLetter: 'L'),
  Areas(areaCode: 40, name: S.current.c48, indexLetter: 'L'),
  Areas(indexLetter: 'M'),
  Areas(areaCode: 389, name: S.current.c49, indexLetter: 'M'),
  Areas(areaCode: 60, name: S.current.c50, indexLetter: 'M'),
  Areas(areaCode: 960, name: S.current.c51, indexLetter: 'M'),
  Areas(areaCode: 356, name: S.current.c52, indexLetter: 'M'),
  Areas(areaCode: 52, name: S.current.c53, indexLetter: 'M'),
  Areas(areaCode: 377, name: S.current.c54, indexLetter: 'M'),
  Areas(areaCode: 976, name: S.current.c55, indexLetter: 'M'),
  Areas(areaCode: 382, name: S.current.c56, indexLetter: 'M'),
  Areas(areaCode: 212, name: S.current.c57, indexLetter: 'M'),
  Areas(areaCode: 95, name: S.current.c58, indexLetter: 'M'),
  Areas(areaCode: 1, name: S.current.c59, indexLetter: 'M'),
  Areas(areaCode: 1284, name: S.current.c60, indexLetter: 'M'),
  Areas(indexLetter: 'N'),
  Areas(areaCode: 977, name: S.current.c61, indexLetter: 'N'),
  Areas(areaCode: 234, name: S.current.c62, indexLetter: 'N'),
  Areas(areaCode: 47, name: S.current.c63, indexLetter: 'N'),
  Areas(areaCode: 27, name: S.current.c64, indexLetter: 'N'),
  Areas(indexLetter: 'P'),
  Areas(areaCode: 351, name: S.current.c65, indexLetter: 'P'),
  Areas(indexLetter: 'R'),
  Areas(areaCode: 81, name: S.current.c66, indexLetter: 'R'),
  Areas(areaCode: 46, name: S.current.c67, indexLetter: 'R'),
  Areas(areaCode: 41, name: S.current.c68, indexLetter: 'R'),
  Areas(indexLetter: 'S'),
  Areas(areaCode: 357, name: S.current.c69, indexLetter: 'S'),
  Areas(areaCode: 1869, name: S.current.c70, indexLetter: 'S'),
  Areas(areaCode: 1758, name: S.current.c71, indexLetter: 'S'),
  Areas(areaCode: 966, name: S.current.c72, indexLetter: 'S'),
  Areas(areaCode: 421, name: S.current.c73, indexLetter: 'S'),
  Areas(areaCode: 386, name: S.current.c74, indexLetter: 'S'),
  Areas(areaCode: 94, name: S.current.c75, indexLetter: 'S'),
  Areas(areaCode: 249, name: S.current.c76, indexLetter: 'S'),
  Areas(indexLetter: 'T'),
  Areas(areaCode: 255, name: S.current.c77, indexLetter: 'T'),
  Areas(areaCode: 66, name: S.current.c78, indexLetter: 'T'),
  Areas(areaCode: 676, name: S.current.c79, indexLetter: 'T'),
  Areas(areaCode: 216, name: S.current.c80, indexLetter: 'T'),
  Areas(areaCode: 90, name: S.current.c81, indexLetter: 'T'),
  Areas(indexLetter: 'W'),
  Areas(areaCode: 380, name: S.current.c82, indexLetter: 'W'),
  Areas(areaCode: 598, name: S.current.c83, indexLetter: 'W'),
  Areas(indexLetter: 'X'),
  Areas(areaCode: 30, name: S.current.c84, indexLetter: 'X'),
  Areas(areaCode: 36, name: S.current.c85, indexLetter: 'X'),
  Areas(areaCode: 64, name: S.current.c86, indexLetter: 'X'),
  Areas(areaCode: 65, name: S.current.c87, indexLetter: 'X'),
  Areas(areaCode: 34, name: S.current.c88, indexLetter: 'X'),
  Areas(areaCode: 852, name: S.current.c89, indexLetter: 'X'),
  Areas(indexLetter: 'Y'),
  Areas(areaCode: 91, name: S.current.c90, indexLetter: 'Y'),
  Areas(areaCode: 62, name: S.current.c91, indexLetter: 'Y'),
  Areas(areaCode: 972, name: S.current.c92, indexLetter: 'Y'),
  Areas(areaCode: 39, name: S.current.c93, indexLetter: 'Y'),
  Areas(areaCode: 44, name: S.current.c94, indexLetter: 'Y'),
  Areas(areaCode: 84, name: S.current.c95, indexLetter: 'Y'),
  Areas(indexLetter: 'Z'),
  Areas(areaCode: 56, name: S.current.c96, indexLetter: 'Z'),
  Areas(areaCode: 853, name: S.current.c97, indexLetter: 'Z'),
  Areas(areaCode: 886, name: S.current.c98, indexLetter: 'Z'),
  Areas(areaCode: 260, name: S.current.c99, indexLetter: 'Z'),
];

2.给列表添加appbar

import 'package:generated/l10n.dart';
import 'package:widget/custom_appbar.dart';
import 'package:widget/login/login_area_list_wdiget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LoginAreaSelectPage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        backgroundColor: Color(0xff5dc8b6),
        leading: IconButton(
          onPressed: () => Navigator.pop(context),
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
        title: Text(
          S.current.xuanzeguojia,
          style: TextStyle(
              fontSize: 38.sp,
              fontWeight: FontWeight.w600,
              color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: LoginAreaListWidget()
      ,
    );
  }
}

3.引用

var areaCode;
GestureDetector(
   onTap: () async {
       var result = await NavigatorUtil.push(LoginAreaSelectPage());
       if (result != null) {
           setState(() {
             areaCode = result;
          });
          }
     },
     child: Container(width:100,height:50,color:Colors.red));

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1512990.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

位图、布隆过滤器

普通的哈希表增删查改的效率的确达到了令人满意的O&#xff08;1&#xff09;&#xff0c;但是本质还是以空间换时间来实现的。并且哈希表中是直接存储数据的&#xff0c;应对一些海量数据处理的问题可能就会造成空间不足的问题。 加入现有40亿个无符号整形数字&#xff0c;设…

RPC基础知识回顾

RPC基础知识回顾 1、先认识一下大家熟悉的HTTP 大家都了解HTTP吧。相信项目中也用过一些。 比如: JDK自带的老旧的HttpURLConnection&#xff0c;封装写的很累,java8之前基于HTTP1.0。在java9开始支持Http2.0Spring的其中RestTemplate都是基于HTTP/1.1的请求。最新的还有Sp…

SpringCloudEureka理论与入门

文章目录 1. 前置工作1.1 搭建 user-server1.1.1 pom1.1.2 po&#xff0c;mapper&#xff0c;controller1.1.3 yml1.1.4 启动类1.1.5 启动并访问 1.2 搭建 order-server1.2.1 pom1.2.2 po mapper controller1.2.3 yml1.2.4 启动类1.2.5 启动并访问 1.3 两个服务通信 2. Eureka2…

当HR问你:“对于你申请的这个岗位,你觉得你欠缺什么?”【文章底部添加进大学生就业交流群】

当HR问这个问题时&#xff0c;你可以展示自我认识和诚实&#xff0c;同时展现你对自己的积极态度和学习能力。以下是一个可能的回答示例&#xff1a; "对于我申请的这个岗位&#xff0c;我认为我可能欠缺一些行业特定的经验。虽然我在相关领域有一定的工作经验和技能&…

H5 网课宣传引导跳转微信单页源码

源码名称&#xff1a;网课宣传引导跳转微信单页 源码介绍&#xff1a;一款网课销售宣传单页源码&#xff0c;源码支持一键复制微信号并跳转打开微信功能。 需求环境&#xff1a;H5 提示&#xff1a;源码仅支持复制微信和跳转打开微信&#xff0c;客户需自行贴贴搜索添加好友…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的石头剪刀布手势识别系统详解(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;本篇博客深入探讨了使用深度学习技术开发石头剪刀布手势识别系统的过程&#xff0c;并分享了完整代码。该系统利用先进的YOLOv8、YOLOv7、YOLOv6、YOLOv5算法&#xff0c;并对这几个版本进行性能对比&#xff0c;如mAP、F1 Score等关键指标。文章详细阐述了YOL…

【漏洞复现】网康科技 NS-ASG 应用安全网关 SQL注入漏洞(CVE-2024-2330)

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

碳实践 | 基于“界、源、算、质、查”五步法,实现企业组织碳核算

碳排放核算是夯实碳排放统计的基础&#xff0c;提高碳排放数据质量的关键&#xff0c;同时&#xff0c;将推动能耗“双控”向碳排放“双控”转变。总体来看&#xff0c;碳核算分为区域层面、组织层面和产品层面的碳核算&#xff0c;这三个层面的意义和计算方法完全不同。本文将…

SingleSpa微前端基本使用以及原理

先说说singleSpa的缺点 不够灵活 不能动态加载css文件css不隔离没有js沙箱的机制 ( 没有全局对象 每次切换的应用 都是同一个window ) 但是刚刚接触微前端 可以了解一下微前端的基础使用 qiankun微前端框架已经很成熟 也是基于singleSpa来实现的 点击跳转qiankun的基础使用 大…

6.同步异步、正则表达式

JS执行机制 js的特点&#xff1a;单线程&#xff0c;同一时间只能做一件事 可以通过多核CPU解决这个问题&#xff0c;允许js脚本创建多个线程&#xff0c;于是js出现了同步和异步 同步 程序执行的时候按照顺序依次执行 异步 程序执行的时候&#xff0c;会跳过某个步骤继续…

装饰者模式-C#实现

可以使用装饰者模式来动态地给一个对象添加额外的职责。 装饰者模式以对客户透明的方式动态地给一个对象附加上更多的责任&#xff0c;装饰者模式相比生成子类可以更灵活地增加功能。 在装饰者模式中各个角色有&#xff1a; 抽象构件&#xff08;Phone&#xff09;角色&#…

【NR 定位】3GPP NR Positioning 5G定位标准解读(十三)-DL-AoD定位

前言 3GPP NR Positioning 5G定位标准&#xff1a;3GPP TS 38.305 V18 3GPP 标准网址&#xff1a;Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;一&#xff09;-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;…

STM32点亮LED灯与蜂鸣器发声

STM32之GPIO GPIO在输出模式时可以控制端口输出高低电平&#xff0c;用以驱动Led蜂鸣器等外设&#xff0c;以及模拟通信协议输出时序等。 输入模式时可以读取端口的高低电平或电压&#xff0c;用于读取按键输入&#xff0c;外接模块电平信号输入&#xff0c;ADC电压采集灯 GP…

EM算法详解

EM(Expectation-Maximum)算法也称期望最大化算法,曾入选“数据挖掘十大算法”中,可见EM算法在机器学习、数据挖掘中的影响力。EM算法是最常见的隐变量估计方法,在机器学习中有极为广泛的用途,例如常被用来学习高斯混合模型(Gaussian mixture model,简称GMM)的参数;隐…

3D产品配置器帮助您更快进入市场的 5 种方式

如果您的电子商务商店可以从产品配置器的使用中受益&#xff08;而且大多数都可以&#xff09;&#xff0c;您还应该知道&#xff0c;此功能还可以帮助您的公司采用更具创新性的产品开发姿态。 更简单地说&#xff1a;它可以帮助您更快地构建更好的产品。 继续阅读以了解3D 产…

FPGA Vivado环境下实现D触发器

题目要求&#xff1a;使用Verilog HDL语言设计一个D触发器。请提交程序源代码和Word格式的作业文档&#xff0c;作业文档中应给出程序源代码及RTL分析原理图。 D触发器的工作原理&#xff1a; 初始状态下&#xff0c;触发器处于复位状态&#xff0c;输出为复位信号的稳定状态…

springboot266基于Web的农产品直卖平台的设计与实现

农产品直卖平台的设计与实现 摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#x…

2024 前端javaScript+ES6

JavaScript 基础 1、基本数据类型&#xff1a; 1.1 基本数据类型&#xff1a; Number&#xff08;数值&#xff09;&#xff1a;表示数字&#xff0c;包括整数和浮点数。例如&#xff1a;5、3.14。 String&#xff08;字符串&#xff09;&#xff1a;表示文本数据&#xff…

Docker容器化技术(互联机制实现便捷互访)

容器的互联是一种让多个容器中的应用进行快速交互的方式。它会在源和接收容器之间创建连接关系&#xff0c;接收容器可以通过容器名快速访问到源容器&#xff0c;而不用指定具体的IP地址。 1.自定义容器命名 连接系统依据容器的名称来执行。因此&#xff0c;首先需要自定义一…

【数据挖掘】实验2:R入门2

实验2&#xff1a;R入门2 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握R数据类型。 2&#xff1a;熟悉和掌握R语言的数据读写。 二&#xff1a;实验内容 1&#xff1a;R数据类型 【基本赋值】 Eg.1代码&#xff1a; x <- 8 x Eg.2代码&#xff1a; a city …