0

在我的应用程序中,我决定显示 a ,因为在 the和 the中都需要ScrollBar相同的内容,我不得不将我的更改为 a 。首先是一个(所以在索引 0 处)有一些“幻灯片”,然后是其他小部件“内容”,它们是幻灯片的解释。在每张幻灯片中都有一个按钮,用于调用幻灯片的说明。当我使用时,它按预期工作,跳转到正确的“内容”,但它并没有......它只是移动了几个像素,就是这样......我设置错误或缺少设置现在与?ScrollControllerScrollBarListViewScrollablePositionedList.builderListView.builderList<Widget> homePageItemsPageViewcontroller.jumpTo();ScrollablePositionedList.builderscrollController.jumpTo(index: 5);ListView.builderListView.builder

ListView 项目:

List<Widget> homePageItems = [
      // carousell index 0
      SizedBox(
        height: MediaQuery.of(context).size.height > 700 ? MediaQuery.of(context).size.height * 0.89 : MediaQuery.of(context).size.height * 0.85,//580,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: [
            Column(
              children: [
                Expanded(
                  child: PageView.builder(

                      controller: pageController,
                      onPageChanged: (index) {
                        timer.cancel();
                        setState(() {
                          if (index > _index) {
                            _current < slides.length -1 ? _current++ : _current = 0;
                            _index = index;
                          } else {
                            _current > 0 ? _current -- : _current = slides.length -1;
                            _index = index;
                          }
                          print('onPageChanged: index is : $index');
                          print('onPageChanged: _current is : $_current');
                        });
                      },
                      itemBuilder: (context, index){
                        return slides[_current];
                      }),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: slides.map((url) {
                    int index = slides.indexOf(url);
                    return Container(
                      width: 5.0,
                      height: 5.0,
                      margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 2.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _current == index
                            ? Colors.redAccent//Color.fromRGBO(0, 0, 0, 0.9)
                            : Colors.black54,//Color.fromRGBO(0, 0, 0, 0.4),
                      ),
                    );
                  }).toList(),
                ),
              ],
            ),
            Row(
              children: [
                IconButton(
                    icon: Icon(CupertinoIcons.back,color:Colors.white.withAlpha(170),size: 40,),
                    onPressed: (){
                      timer.cancel();
                      pageController.previousPage(duration: Duration(milliseconds: 800), curve: Curves.fastOutSlowIn);
                    }),
                IconButton(
                    icon: Icon(CupertinoIcons.forward,color: Colors.white.withAlpha(150),size: 40,),
                    onPressed: () {
                      timer.cancel();
                      pageController.nextPage(duration: Duration(milliseconds: 800), curve: Curves.fastOutSlowIn);
                    }),
              ],
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),
          ],
        ),
      ),
      // Cloud Biking index 1
      SizedBox(
        height: MediaQuery.of(context).size.height > 700
            ? MediaQuery.of(context).size.height * 0.89
            : 700,//MediaQuery.of(context).size.height * 0.90,//580,
          width: MediaQuery.of(context).size.width,
        child: CloudBikingContent(key: widget.key,)
      ),
      // Stolen bicycles index 2
      SizedBox(
        height: MediaQuery.of(context).size.height > 700
            ? MediaQuery.of(context).size.height * 0.95
            : 800,//MediaQuery.of(context).size.height * 0.90,//580,
        width: MediaQuery.of(context).size.width,
        child: StolenBicyclesContent(key: widget.key),
      ),
      // Scheduler index 3
      SizedBox(
        height: MediaQuery.of(context).size.height > 700

            ? MediaQuery.of(context).size.height * 0.89 // Web
            : 870,//MediaQuery.of(context).size.height * 0.90,//580, // Mobile
        width: MediaQuery.of(context).size.width,
        child: SchedulerContent(key: widget.key,),
      ),
      // Orders index 4
      SizedBox(
        height: MediaQuery.of(context).size.height > 700
            ? MediaQuery.of(context).size.height * 0.89
            : 850,//MediaQuery.of(context).size.height * 0.90,//580,
        width: MediaQuery.of(context).size.width,
        child: OrdersContent(key: widget.key,),
      ),
      // Bookings index 5
      SizedBox(
        height: MediaQuery.of(context).size.height > 700
            ? MediaQuery.of(context).size.height * 0.89
            : 850,//MediaQuery.of(context).size.height * 0.90,//580,
        width: MediaQuery.of(context).size.width,
        child: BookingsContent(key: widget.key),
      ),
      NavigationBarBottom()
    ];

PageView 项目:

List<Widget> slides = [
    ScreenTypeLayout(
      mobile: CloudBikingSlideMobile(
          bgImage: mainBgImageMobile,
      onTap: (){
        controller.jumpTo(1);
//        scrollController.jumpTo(index: 1);
//            scrollController.scrollTo(index: 1, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);// .jumpTo(index: 1);
      }),
      desktop: CloudBikingSlideDesktop(
        bgImage: mainBgImageDesktop,
        onTap: (){
          controller.jumpTo(1);
//          scrollController.jumpTo(index: 1);
//          scrollController.scrollTo(index: 1, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 1);
        }),
    ),
    ScreenTypeLayout(
      mobile: StolenBicyclesSlideMobile(
          bgImage: stolenBicyclesBgMobile,
        onTap: (){
          controller.jumpTo(2);
//            scrollController.jumpTo(index: 2);
//          scrollController.scrollTo(index: 2, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 2);
        }),
      desktop: StolenBicyclesSlideDesktop(
          bgImage: stolenBicyclesBgDesktop,
        onTap: (){
          controller.jumpTo(2);
//          scrollController.jumpTo(index: 2);
//          scrollController.scrollTo(index: 2, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 2);
        }),
    ),
    ScreenTypeLayout(
      mobile: SchedulerSlideMobile(
        bgImage: schedulerBgImageMobile,
        onTap: (){
          controller.jumpTo(3);
//          scrollController.jumpTo(index: 3);
//          scrollController.scrollTo(index: 3, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 3);
        }),
      desktop: SchedulerSlideDesktop(
        bgImage: schedulerBgImageDesktop,
    onTap: (){
      controller.jumpTo(3);
//      scrollController.jumpTo(index: 3);
//    scrollController.scrollTo(index: 3, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 3);
    }),
    ),
    ScreenTypeLayout(
      mobile: OrdersSlideMobile(
        bgImage: orderBgImageMobile,
          onTap: (){
            controller.jumpTo(4);
//          scrollController.jumpTo(index: 4);
//            scrollController.scrollTo(index: 4, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 4);
          }),
      desktop: OrdersSlideDesktop(
        bgImage: orderBgImageDesktop,
          onTap: (){
            controller.jumpTo(4);
//            scrollController.jumpTo(index: 4);
//            scrollController.scrollTo(index: 4, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 4);
          }),
    ),
    ScreenTypeLayout(
      mobile: BookingsSlideMobile(
        bgImage: bookingBgImageMobile,
          onTap: (){
            controller.jumpTo(5);
//            scrollController.jumpTo(index: 5);
//            scrollController.scrollTo(index: 5, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 5);
          }),
      desktop: BookingsSlideDesktop(
        bgImage: bookingBgImageDesktop,
          onTap: (){
            controller.jumpTo(5);
//            scrollController.jumpTo(index: 5);
//            scrollController.scrollTo(index: 5, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 5);
          }),
    ),
  ];

列表视图:

Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        color: Colors.transparent,
      child: Scrollbar(
        controller: controller,
        isAlwaysShown: true,
        thickness: 10,
        radius: Radius.circular(5),
//        child: ScrollablePositionedList.builder(
//            itemScrollController: scrollController,
//            initialScrollIndex: 0,
//            itemCount: homePageItems.length,
//            itemBuilder: (BuildContext context, int index) => homePageItems[index],
        child: ListView.builder(
          controller: controller,
          itemCount: homePageItems.length,
          itemBuilder: (BuildContext context, int index) => homePageItems[index],


          ),
      ),
      ),
    );
4

1 回答 1

0

发现了问题。ScrollController'sjumpTo期望一个像素值,而 ItemScrollController'sjumpTo期望一个索引跳转到并相应地移动..实际上是一个更好的解决方案恕我直言..因此,通过将内容高度乘以其索引,您可以获得正确数量的像素来移动..

double contentHeight = MediaQuery.of(context).size.height > 700 ? MediaQuery.of(context).size.height * 0.89 : MediaQuery.of(context).size.height * 0.85;

...

onTap: (){
          controller.jumpTo(2 * contentHeight);
//          scrollController.jumpTo(index: 2);
//          scrollController.scrollTo(index: 2, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);//.jumpTo(index: 2);
        }
``
于 2020-10-10T07:57:54.883 回答