通过按钮单击和滚动进行水平页面交换 - 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(
                                   ...
                                ),
                              ),
                            ),
                          ),