This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

  • The index bar and click effect on the right are realized

1. Display the index bar

We use stack as the entire space. The index bar on the right is superimposed on the listView, which is shown below first. The index bar is Positioned in a fixed position on the right side so we use Positioned

child:Stack(
  children: [
    ListView.builder(itemBuilder: _itemBuilder,
      itemCount: _headerData.length+_listDatas.length,

    ),
    Positioned(
        top: 0.0,
        bottom: 0.0,
        right: 0.0,
        width: 30,
        child: Container(
          color: Color.fromRGBO(1.1.1.0.3))),,)Copy the code

Effect:

We define the data

const INDEX_WORDS = [
  '🔍'.'do things'.'A'.'B'.'C'.'D'.'E'.'F'.'G'.'H'.'I'.'J'.'K'.'L'.'M'.'N'.'O'.'P'.'Q'.'R'.'S'.'T'.'U'.'V'.'W'.'X'.'Y'.'Z'
];
Copy the code

Let’s define an array of words

final List<Widget> _words = [];
Copy the code

Through the for loop at initState, we stretch with Expanded


for(int i = 0; i<INDEX_WORDS.length; i++){ _words.add(Expanded(child: Text(INDEX_WORDS[i],style: TextStyle(fontSize:10,color: Colors.grey),)));

}
Copy the code

Remove the color from the previously positioned position, and then wrap it with column

Positioned(
    top: 0.0,
    bottom: 0.0,
    right: 0.0,
    width: 30,
    child: Container(

      child:
      Column(
        children: _words
        ,
      ),
    )),
Copy the code

Let’s calculate this position, the whole thing is centered, it’s 1/8 from the top, it’s half the height of the screen, not the bottom. Let’s use our previous macro definition,

top: screenHeight(context)/8,
height: screenHeight(context) / 2,
right: 0.0,
width: 30.Copy the code

Of course, we can also use the ListView as an index bar to wrap

class _IndexBarState extends State<IndexBar> {
  Widget _item (BuildContext context,int index){
    return Container(
      alignment: Alignment.center,
      height: 15,
      child:
      Expanded(
        child:
        Text(INDEX_WORDS[index],style: TextStyle(fontSize: 10,color: Colors.grey),),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    returnContainer( child:ListView.builder(itemBuilder: _item,itemCount: INDEX_WORDS.length,), ); }}Copy the code

The effect is similar:

2. Select a color for the index bar

The index bar will have a background color when selected, and the index will be white when selected. Let’s define 2 colors

Color _backgroundColor = Color.fromRGBO(1.1.1.0);
Color _textColor = Colors.black;
Copy the code

Let’s change the color

There’s a drag effect, so add a gesture to the whole thing and we’ll use the vertical gesture

The first step is to switch the background color and text color

/ / click
onVerticalDragDown: (DragDownDetails details){
  setState(() {
    _backgroundColor = Color.fromRGBO(1.1.1.0.5);
    _textColor = Colors.white;
  });

},
/ / leave
onVerticalDragEnd:(DragEndDetails details){
  setState(() {
    _backgroundColor = Color.fromRGBO(1.1.1.0);
    _textColor = Colors.black;
  });

},
Copy the code

But the text color doesn’t change becausewordsCreate is not placedbuildInside, is placed ininitState,initStateOur equivalentviewDidLoadSimilarly, incremental rendering is all in build, so we are influtterAll component creation in thebuildIn the.

The modified effect is as follows:

The next article describes the selected bubble style and the association with the list.