概念介紹

我們?cè)谶@里說(shuō)的指示器表示PageView底部的小圓圈，它用來(lái)指示當(dāng)前哪個(gè)頁(yè)面被選中。常用的場(chǎng)景是滑動(dòng)頁(yè)面時(shí)小圓圈高亮顯示當(dāng)前被選中的頁(yè)面，其它小圓圈顯示為暗色，表示其它頁(yè)面沒(méi)有被選中。本章回中將詳細(xì)介紹如何給PageView添加這種小圓圈。

添加方法

1. 指示器為小圓圈，使用Material的圓形實(shí)現(xiàn)，這里不理解不要緊，看代碼就能明白；
2. 創(chuàng)建n個(gè)指示器(這里的n是PageView中Page的數(shù)量)，并且使用Row容器把它們排列中一行；
3. 使用Column當(dāng)作外層容器，第一行存放PageView，第二行存放排在一行的小圓圈，它們就是PageView的指示器；

示例代碼

//創(chuàng)建小圓圈指示器:代碼中的r表示小圓圈的半徑，s表示小圓圈之間的間隔，它們的值通過(guò)參數(shù)傳入
  Widget _Indicator(int index, int pageCount, double r, double s) {
    
    //通過(guò)pageController中的索引值來(lái)判斷當(dāng)前頁(yè)面是否被選中
    bool isIndexPageSelected = (index ==
        (pageController.page != null ? pageController.page?.round() : 0));

    //通過(guò)參數(shù)傳遞的索引值來(lái)判斷當(dāng)前頁(yè)面是否被選中
    // bool isIndexPageSelected = (index == currentIndex) ? true : false;
    //打印索引值，調(diào)試使用
    // print("page count ${pageController.page?.round()}");
    // print("current : ${currentIndex}");

    return Container(
      //寬度是圓的半徑，寬度是半徑+左右兩邊的間隔(space)
      height: r,
      width: r + 2 * s,
      child: Material(
        color: isIndexPageSelected ? Colors.greenAccent : Colors.grey,
        type: MaterialType.circle,
        child: Container(
          width: r,
          height: r,
        ),
      ),
    );
  }

//把三個(gè)小圓圈組成一行
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _Indicator(0, 3, 20, 18),
        _Indicator(1, 3, 20, 18),
        _Indicator(2, 3, 20, 18),
      ],
    );
  }
}
//使用Column當(dāng)作外層容器，第一行存放PageView，第二行存放排在一行的小圓圈，它們就是PageView的指示器；
return Scaffold(
  appBar: AppBar(
    title: const Text("Example of PaveView"),
    backgroundColor: Colors.purpleAccent,
  ),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Container(
        width: double.infinity,
        height: 500,
        child: PageView(), //PageView詳細(xì)的內(nèi)容省略不寫(xiě)
      ),
      Indicator(
        pageController: mPageController,
        count: 3,
        currentIndex: pageIndex,
      )
    ],
  ),
);

上面的代碼中只列出了核心代碼，完整的代碼可以查看Github上ex015中的內(nèi)容。編譯并且運(yùn)行上面的代碼可以得到一個(gè)顯示三個(gè)Page的頁(yè)面，每個(gè)Page對(duì)應(yīng)一個(gè)小圓圈指示器，滑動(dòng)Page時(shí)小圓圈的顏色跟著變化。我在這里就不演示程序運(yùn)行結(jié)果了，建議大家自己動(dòng)手去實(shí)踐。

指示器聯(lián)動(dòng)

代碼中還有一部分內(nèi)容大家可能看不明白，一個(gè)是pageController，另外一個(gè)是小圓圈的顏色設(shè)置。它們兩結(jié)合起來(lái)可以讓小圓圈與page聯(lián)動(dòng)，什么是聯(lián)動(dòng)？就是Page滑動(dòng)到哪一頁(yè),與該頁(yè)對(duì)應(yīng)的小圓圈高亮顯示，其它頁(yè)的小圓圈顯示為暗色，這樣就可以通過(guò)小圓圈來(lái)指示出當(dāng)前被選中的頁(yè)面，這也是我們叫它指示器的原因。

聯(lián)動(dòng)的原理：通過(guò)pageController獲取當(dāng)前被選中頁(yè)的索引值，把該值與參數(shù)中傳入的索引值index進(jìn)行比較，如果它們相同說(shuō)明當(dāng)前頁(yè)被選中了，反之則說(shuō)明當(dāng)前頁(yè)沒(méi)有被選中。對(duì)于被選中的指示器，我們把它的顏色設(shè)置為高亮色，沒(méi)有被選中的指示器，我們把它的顏色設(shè)置為暗色或者叫淺色。

該原理中核心的內(nèi)容是獲取當(dāng)前被選中頁(yè)的索引值，除了使用pageController外還有一種方法：在代碼中定義一個(gè)變量用來(lái)存放被選中頁(yè)的索引值(代碼中為currentIndex變量)，然后在PageView的onPageChanged()方法中通過(guò)setState()方法修改索引值，最后通過(guò)指示器的參數(shù)傳遞給指示器。這部分內(nèi)容對(duì)應(yīng)的代碼被注釋起來(lái)了，大家可以打開(kāi)注釋后再編譯程序，從程序運(yùn)行效果中可以看到這種方法也可以實(shí)現(xiàn)指示器聯(lián)動(dòng)效果。

看官們，關(guān)于"如何給PageView添加指示器"相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評(píng)論區(qū)交流與討論!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-441977.html

到了這里，關(guān)于第二十八回：如何給PageView添加指示器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！