Shulou(Shulou.com)05/31 Report--

This article mainly introduces Flutter imitation Wechat address book how to achieve custom navigation bar related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this Flutter imitation Wechat address book how to achieve custom navigation bar article will have a harvest, let's take a look at it.

Key points: gesture positioning sliding, list positioning, gesture, list linkage.

To prepare the data, first we need to prepare the navigation directory data

List _ az = ["☆", "A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X" "Y", "Z",]

Then the list data, the list data can be sorted for us by the background, and if the background does not sort us, we can also sort and assemble it ourselves. Here we use a plug-in to obtain the first letters of Pinyin according to Chinese characters. We can sort the data ourselves.

Lpinyin: ^ 2.0.3

Data format: a NameBean corresponds to a list of letters, which is the format in which we store formal list data.

Class NameBean {String? Initial;// alphabet navigation List? NameList;// content list NameBean ({this.initial, this.nameList,});} / / name: "Lao Li" / I only put one name field here, and I only need to add a field here to expand the content in the future. Class Name {String? Name; Name ({this.name,});}

Next, let's do the navigation bar:

Implementation idea: the navigation bar is a List list, click, slide, release will have different interactions, we according to different interactions to achieve, here we will use the official GestureDetector components, specifically for gesture recognition. The height of each item is fixed, and the location data returned by gesture interaction is returned to the directory we want. For example, the height of each of my directories is set to 20.

Navigation bar code: when clicking or moving, the selected directory will have a pressing effect.

GestureDetector (child: Container (margin: EdgeInsetsDirectional.only (top: 40), width: 40, / / navigation bar child: ListView.builder (physics: NeverScrollableScrollPhysics (), shrinkWrap: true, itemBuilder: (context, index) {return SizedBox (height: 20) / / A trigger effect of pressing or moving sliding is made here: child: Container (alignment: Alignment.center, decoration: BoxDecoration (color: currentIndex = = index? Colors.redAccent: null, shape: BoxShape.circle), child: Text (_ az [index], style: TextStyle (color: currentIndex = = index? Colors.white: Colors.black87,) }, itemCount: _ az.length,), / / finger press to trigger vertical stroke and use onVertica XXX to call back onVerticalDragDown: (DragDownDetails e) {/ / print the position of finger press (relative to the screen) int I = e.localPosition.dy ~ / 20; / / _ scrollController.jumpTo (index: I); setState (() {currentIndex = I;}) }, / / this callback onVerticalDragUpdate: (DragUpdateDetails e) {/ / the update offset int I = e.localPosition.dy ~ / 20; _ az.length; if (I > = 0 & & I) is triggered when the finger is slipped.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.