通过按钮单击和滚动进行水平页面交换 - Flutter

Question

我正在尝试通过同时使用按钮和滚动来水平切换屏幕。我正在努力实现这样的目标。我希望你明白我想做什么。

下面是我实现这个的代码

class ChefProfile extends StatefulWidget {
  @override
  _ChefProfileState createState() => _ChefProfileState();
}

class _ChefProfileState extends State<ChefProfile> {
 
 int pageViewIndex;
  PageController _pgController = PageController(initialPage: 0, keepPage: true);
  List pageContent = [ChefDishes(), ChefInfo()];


  @override
  Widget build(BuildContext context) {
.
. // Some code (Irrelevant to question)
.
 Container(
                     
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,

                          InkResponse(
                            onTap: () => setState(() {
                              pageViewIndex = 0;
                            }),
// --- DISH BUTTON                   
                            child: Container(
                              ...
                              child: Text(
                                  "Dishes",
                                  style: TextStyle(
                                   ...
                                ),
                              ),
                            ),
                          ),

                          Spacer(),
// --- INFO BUTTON           
                          InkResponse(
                            onTap: () => setState(() {
                              pageViewIndex = 1;
                            }),

                            child: Container(
                             ...
                                child: Text(
                                  "Info",
                                  style: TextStyle(
                                   ...
                              ),
                             ),
                            ),
                          ),
                        ],
                      ),
                    ),

                    Container(
                       ...
                      child: PageView.builder(
                        controller: _pgController,
                        itemCount: pageContent.length,
                        itemBuilder: (context, pageViewIndex) {

                          return pageContent[pageViewIndex];
                        },
                      ),
                    ),

我正在使用“pageScreenIndex”保存屏幕索引并在任一按钮单击时更改它的值。 我是 flutter 新手
我的屏幕现在看起来像这样。它会在交换时改变屏幕，但不会在单击按钮时改变屏幕

Answer 1

您可以使用 animateToPage 来实现它。

  InkResponse(
                            onTap: () => {
                              pageViewIndex = 0;
                              controller.animateToPage(pageViewIndex,
                                                       duration: Duration(milliseconds: 100),
                                                       curve: Curves.easeIn,
                                                     ); 
                            },
// --- DISH BUTTON                   
                            child: Container(
                              ...
                              child: Text(
                                  "Dishes",
                                  style: TextStyle(
                                   ...
                                ),
                              ),
                            ),
                          ),