【问题标题】:Flutter: How to control a PageView by GetxController?Flutter:如何通过 GetxController 控制 PageView?
【发布时间】:2021-08-23 11:44:44
【问题描述】:

主题:PageView 和 GetX

我在将PageView widget 上的控件与HomeView 模块分离时遇到问题。我有一个GlobalController 及其各自的GlobalBinding,它们在打开HomeView 时被实例化。我想将setPage(int page) 方法带到GlobalController,这最终会使HomeView 的PageView 更改页面。我不知道如何将PageControllerPageView 变为GlobalController 以使其正常工作。我应该如何进行?

【问题讨论】:

    标签: flutter model-view-controller flutter-pageview flutter-getx


    【解决方案1】:

    像这样的东西? 我在入职时使用综合浏览量

    class Onboard{
    
    
     final headTitle;
      final secondarytitle;
      final discription;
      final pngimage;
     Onboardslist(this.headTitle, this.secondarytitle, this.discription, this.pngimage);
    
    }
    

    那么对于控制器

    class OnboardController extends GetxController{
    
    
      var selectedPagexNumber = 0.obs;
    bool get isLastPage => selectedPagexNumber.value == onBoardPages.length -1;
    var pageControll = PageController();
    
    
       forwardAct()
      {
        if(isLastPage) Get.offNamedUntil(signin, (route)=> false);
    
        else pageControll.nextPage(duration: 300.milliseconds, curve: Curves.ease);
      }
    
      List<Onboardslist> onBoardPages = 
      [
        Onboardslist("title",
        "short description",
        "long description",
        imageString),
         Onboardslist("title",
        "short description",
        "long description",
        imageString),
        Onboardslist("title",
        "short description",
        "long description",
        imageString),
        Onboardslist("title",
        "short description",
        "long description",
        imageString)
      ];
    
    }
    

    那么对于我所做的视图就是这样

    class Onboarding extends StatelessWidget {
    
       final yourController= OnboardController();
    
      @override
      Widget build(BuildContext context) {
        SizeXGet().init(context);
         return Scaffold(
           backgroundColor: decent_white,
           appBar: AppBarCustom(
            title: 'Skip',
            button: ()=>Get.offNamedUntil(signin,(route)=>false),
          ),
          body: WillPopScope(
            onWillPop: () async => false,
              child: SafeArea(
                child: Stack(
                  children: [
                    PageView.builder(
                      controller: yourController.pageControll,
                      onPageChanged: yourController.selectedPagexNumber,
                      itemCount: yourController.onBoardPages.length,
                      itemBuilder: (context, index)
                      =>Padding(
                        padding: const EdgeInsets.only(left: 10,right: 10),
                        child: Container(
                          child:  SingleChildScrollView(
                              physics: BouncingScrollPhysics(),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                Container(
                                  height: getHeight(150),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                         Padding(
                           padding: const EdgeInsets.only(left: 20,right: 20),
                           child: Text(yourController.onBoardPages[index].headTitle,
                           style: TextStyle(
                           color: darkish_color,
                            fontSize: getHeight(20),
                           fontFamily: 'Metropolis-SemiBold' ,
                           fontWeight: FontWeight.bold
                           ),),
                         ),
                         SizedBox(height: 15,),
                         Padding(
                         padding: const EdgeInsets.only(left: 50,right: 50),
                         child: Text(yourController.onBoardPages[index].secondarytitle,
                         style: TextStyle(
                                      color: not_sopure_black,
                                      fontSize: getHeight(26),
                                      fontFamily: 'Metropolis-Bold' ,
                                      fontWeight: FontWeight.bold
                                    ),
                                    ),
                                  ),
                                  SizedBox(height: 15,),
                                  Padding(
                                   padding: const EdgeInsets.only(left: 40,right: 40),
                                    child: Text(yourController.onBoardPages[index].discription,
                                    style: TextStyle(
                                      color: not_sopure_black,
                                      fontSize: getHeight(15),
                                      fontFamily: 'Metropolis-Regular' ,
                                    ),
                                    ),
                                  ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 15,),
    
                                  Image.asset(yourController.onBoardPages[index].pngimage),
                                 
                                  
                                  
                                ],
                              ),
                            ),
                        ),
                      ),
                    ),
                 
                  ],
                ),
              
            ),
            
          ),
          bottomNavigationBar: BottomAppBar(
            color: Colors.transparent,
            elevation: 0,
            child: Container(
              height: 75,
              width: MediaQuery.of(context).size.width,
              child:  Padding(
            padding: const EdgeInsets.only(left: 25,right:25,),
            child: Container(
              width: MediaQuery.of(context).size.width,
              child: Stack(
                children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          child: Row(
                            children: List.generate(yourController.onBoardPages.length,
                            (index)=>Obx(()=>
                            AnimatedContainer(
                              duration: Duration(milliseconds: 200),
                              margin: EdgeInsets.only(right: 5),
                              height: 10,
                              width: yourController.selectedPagexNumber.value == index ? 20 : 10,
                                  decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(60),
                                  color: yourController.selectedPagexNumber.value == index
                                  ? darkish_color
                                  : not_sopure_black,),
                            ),
                            )),
                          ),
                        ),
                      ),
                    
                    Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 130,
                        height: 52,
                        child: RaisedButton(
                          elevation: 0,
                          onPressed: yourController.forwardAct,
                          splashColor: not_sopure_black,
                          color: darkish_color,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(100)
                          ),
                          child: Obx(() =>
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(yourController.isLastPage ? 'Next' : 'Next',
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Metropolis-Semibold',
                                fontSize: 16,
                              ),
                              ),
                            ],
                          ),
                          ),
                        ),
                      ),
                    )
                ],
              ),
            ),
        ),
            ),
          ),
        );
      }
    }
    

    【讨论】:

      猜你喜欢
      • 2023-03-25
      • 2023-03-08
      • 1970-01-01
      • 2021-04-14
      • 2021-12-24
      • 1970-01-01
      • 2020-07-22
      • 2022-12-02
      • 2020-08-26
      相关资源
      最近更新 更多