在 SingleChildScrollView 中有 2 个容器和 2 个墨水池。当用户单击墨水池时，屏幕应滚动到相应的容器

Question

我在一列中有一个 SingleChildScrollView 。连续有 2 个墨水池。在该行下方，我有 2 个具有不同高度和内容的容器。我希望当用户单击第一个墨水池时屏幕滚动到第一个容器，当用户单击第二个墨水池时屏幕应滚动到第二个容器。 代码在这里：

class ExperienceCustomDrawer extends StatelessWidget {
  ExperienceCustomDrawer({
    super.key,
  });


  @override
  Widget build(BuildContext context) {

    return Drawer(
        shape:const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20)),
        ),
        width: MediaQuery.of(context).size.width * 0.6,
        child:Container(
          color: Constants.black,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 15, 30, 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      InkWell(
                          onTap:(){
                            Navigator.of(context).pop();
                          },
                          child: const Icon(Icons.close, color: Constants.orange,))
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(30, 15, 30, 15),
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Text("Sea Food Experience",
                      style: TextStyle(
                        color: Constants.white,
                        fontSize: 28,
                      ),
                    ),
                  ),
                ),

                //THIS IS MY INKWELL ROW
                Container(
                  width: MediaQuery.of(context).size.width *0.6,
                  height: 70,
                  color: Constants.grey,
                  child:
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 30),
                        child: Column(
                          children: [
                            Flexible(
                                child: Text("Details",
                                  style: TextStyle(
                                    color: Constants.orange,
                                    fontSize: 16,
                                  ),
                                )),
                            Flexible(
                              child: Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: CircleAvatar(
                                  radius: 3,
                                  backgroundColor: Constants.orange,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),

                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 15.0),
                        child: Column(
                          children: [
                            Flexible(
                                child: Text("Menus",
                                  style: TextStyle(
                                    color: Constants.orange,
                                    fontSize: 16,
                                  ),
                                )),
                            Flexible(
                              child: Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: CircleAvatar(
                                  radius: 3,
                                  backgroundColor: Constants.orange,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),


                    ],
                  ),
                ),

//THIS IS THE FIRST CONTAINER
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      
                    ],
                  ),
                ),
                
                
                //THIS IS THE second CONTAINER
                Container(child: MenuCard()),



              ],
            ),
          ),
        )
    );
  }
}

我还希望当用户滚动屏幕并且屏幕到达第二个容器时，第二个墨水池应将其颜色更改为红色，显示屏幕位于第二个容器上。如果用户使用第一个容器，则第一个墨水池颜色应为红色，第二个墨水池颜色应为橙色。

Answer 1

您可以使用几种方法。

1. 使用按键滚动
2. 在列表视图中使用控制器
3. 使用scrollable_positioned_list包

更多详情，您可以参考THIS。