鸿蒙应用开发———今天我们来实现这个最最最基础的效果(一)

鸿蒙应用开发———今天我们来实现这个最最最基础的效果——定位选择

今天首先来学习模态转场，就是页面中弹出，全屏&半屏的弹框

这里我们要是使用一个组件bindContentCover他有两个必填参数:

1. isShow为bollean类型：是否显示全屏模态

2. builder为CustomBuilder类型，配置全屏模态页面内容

       .bindContentCover(this.isShow, this.aa())
   

   this.a()为我自定义的函数

   1. 使用简单的ForEach对list组件，和分组容器ListItemGroup来渲染

   List({ scroller: this.scroller }) {
             //历史
             ListItemGroup({ header: this.header1('历史') }) {
               ListItem() {
                 Flex({ wrap: FlexWrap.Wrap }) {
                   ForEach(this.historyCitys, (item: string) => {
                     Text(item)
                       .width('33.33%')
                       .fontSize(20)
                       .textAlign(TextAlign.Center)
                       .margin({ top: 5, bottom: 5 })
                   })
                 }
               }
             }
   
             //热门
             ListItemGroup({ header: this.header1('热门') }) {
               ListItem() {
                 Flex({ wrap: FlexWrap.Wrap }) {
                   ForEach(this.hotCitys, (item: string) => {
                     Text(item)
                       .width('33.33%')
                       .fontSize(20)
                       .textAlign(TextAlign.Center)
                       .margin({ top: 5, bottom: 5 })
                   })
                 }
               }
             }
   
             //城市
             ForEach(this.cityContentList, (item: BKCityContent) => {
               ListItemGroup({ header: this.header1(item.initial) }) {
                 ForEach(item.cityNameList, (item2: string) => {
                   ListItem() {
                     Text(item2)
                       .fontSize(25)
                       .fontColor('#666')
                       .margin({ top: 10, left: 10, bottom: 10 })
                   }
                 })
               }
               .divider({
                 strokeWidth: 2,
                 color: '#ffdbd7d7',
                 startMargin: 70,
                 endMargin: 20
               })
             })
           }
   

   接着使用AlphabetIndexer组件来辅助实现导航联动，以及快速定位

   AlphabetIndexer({ arrayValue: this.alphabets, selected: this.current })
           .font({ size: 20 })
           .itemSize(30)
           .selectedFont({ size: 20 })
   

   一个普通的a-z数组就可以实现

    alphabets: string[] =
       ['#', '热', "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y",
         "Z"]
   

   接下来是绑定双方

   首先来控制list的滚动

   // 1. 创建控制器(ListScroller)对象
   listScroller: ListScroller = new ListScroller()
   // 2. 设置给 List 组件
   List({ space: 20, scroller: this.listScroller }) {
     // ...
   }
   .onScrollIndex(start => {
             this.current = start
   })//绑定滚动事件
   
   
   

   接着创建一个状态变量来存index

     @State current: number = 0
   

   把AlphabetIndexer绑定到list上

   .onSelect(index => {
             this.scroller.scrollToIndex(index)
           })
   

   几个数组，想实现的小伙伴快行动起来

     //热门
     hotCitys: string[] =
       ['北京', '上海', '广州', '深圳', '天津', '杭州', '南京', '苏州', '成都', '武汉', '重庆', '西安', '香港', '澳门',
         '台北']
     //历史
     historyCitys: string[] = ['北京', '上海', '广州', '深圳', '重庆']
     //城市
     cityContentList: BKCityContent[] = [
       {
         initial: 'A',
         cityNameList: ['阿拉善', '鞍山', '安庆', '安阳', '阿坝', '安顺']
       },
       {
         initial: 'B',
         cityNameList: ['北京', '保定', '包头', '巴彦淖尔', '本溪', '白山']
       },
       {
         initial: 'C',
         cityNameList: ['成都', '重庆', '长春', '长沙', '承德', '沧州']
       },
       {
         initial: 'D',
         cityNameList: ['大连', '东莞', '大同', '丹东', '大庆', '大兴安岭']
       },
       {
         initial: 'E',
         cityNameList: ['鄂尔多斯', '鄂州', '恩施', '额尔古纳市', '二连浩特市', '恩施市']
       },
       {
         initial: 'F',
         cityNameList: ['福州', '佛山', '抚顺', '阜新', '阜阳', '抚州']
       },
       {
         initial: 'G',
         cityNameList: ['广州', '贵阳', '赣州', '桂林', '贵港', '广元']
       },
       {
         initial: 'H',
         cityNameList: ['杭州', '海口', '哈尔滨', '合肥', '呼和浩特', '邯郸']
       },
       {
         initial: 'J',
         cityNameList: ['济南', '晋城', '晋中', '锦州', '吉林', '鸡西']
       },
       {
         initial: 'K',
         cityNameList: ['昆明', '开封', '康定市', '昆山', '康保县', '宽城满族自治县']
       },
       {
         initial: 'L',
         cityNameList: ['兰州', '廊坊', '临汾', '吕梁', '辽阳', '辽源']
       },
       {
         initial: 'M',
         cityNameList: ['牡丹江', '马鞍山', '茂名', '梅州', '绵阳', '眉山']
       },
       {
         initial: 'N',
         cityNameList: ['南京', '宁波', '南昌', '南宁', '南通', '南平']
       },
       {
         initial: 'P',
         cityNameList: ['盘锦', '莆田', '萍乡', '平顶山', '濮阳', '攀枝花']
       },
       {
         initial: 'Q',
         cityNameList: ['青岛', '秦皇岛', '齐齐哈尔', '七台河', '衢州', '泉州']
       },
       {
         initial: 'R',
         cityNameList: ['日照', '日喀则', '饶阳县', '任丘市', '任泽区', '饶河县']
       },
       {
         initial: 'S',
         cityNameList: ['上海', '苏州', '深圳', '沈阳', '石家庄', '朔州']
       },
       {
         initial: 'T',
         cityNameList: ['天津', '太原', '唐山', '通辽', '铁岭', '通化']
       },
       {
         initial: 'W',
         cityNameList: ['无锡', '武汉', '乌海', '乌兰察布', '温州', '芜湖']
       },
       {
         initial: 'X',
         cityNameList: ['厦门', '西安', '西宁', '邢台', '忻州', '兴安盟']
       },
       {
         initial: 'Y',
         cityNameList: ['扬州', '阳泉', '运城', '营口', '延边', '伊春']
       },
       {
         initial: 'Z',
         cityNameList: ['郑州', '珠海', '张家口', '镇江', '舟山', '漳州']
       }
     ]
     
   

结束.......撒花