在 flutter swiper 中编辑分页

Question

我想在flutter中为swiper做一个自定义分页。我想在分页中显示 2 个单词而不是点或分数，谁能告诉我更好的方法，因为在我的代码中我无法通过单击自定义分页来更改页面。

我的代码：-

Swiper(
          controller: swiperController,
          itemCount: 2,
          itemBuilder: (context,index){
            return index==0?A(context):B(context); //Here A and B are 2 pages to swipe between
          },
          pagination: new SwiperPagination(
              margin: new EdgeInsets.all(0.0),
              builder: new SwiperCustomPagination(builder:
                  (BuildContext context, SwiperPluginConfig config) {
                return Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: config.activeIndex==0?Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
                        TextSpan(text: "   Second ",recognizer: TapGestureRecognizer()..onTap=(){},style: TextStyle(fontSize: 17.0,),)
                      ])
                  ):Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 17.0,),),
                        TextSpan(text: "    Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
                      ])
                  ),
                );
              })),
        ),

Answer 1

使用 pageview.builder() 可能是更好的选择，但如果您想更改此代码，只需使用 TextSpan 的识别器属性。

SwiperCustomPagination(builder:
                  (BuildContext context, SwiperPluginConfig config) {
                return Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: config.activeIndex==0?Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
                        TextSpan(
                          text: "   Second ",
                          recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
                          
                          //added recognizer over here
                          
                          style: TextStyle(fontSize: 17.0,),)
                      ])
                  ):Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(
                          text: "First   ",
                          recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
                          
                          //added recognizer over here
                          
                          style: TextStyle(fontSize: 17.0,),
                        ),
                        TextSpan(text: "    Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
                      ])
                  ),
                );
              })

在 flutter swiper 中编辑分页

edit pagination in flutter swiper

flutter

dart

swiper