flutter - 如何使容器可点击，以及如何在单击时导致其他页面 flutter

Question

如何使该部分可单击，以便可以导航到另一个页面，并具有希望能够导航到并播放视频的图片网格。

                  SizedBox(height: 30,),
                    Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("Weight Loss Workouts", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.lime[700], fontSize: 25),),
                          SizedBox(height: 20,),
                          Container(
                            height: 200,
                            child: ListView(
                              scrollDirection: Axis.horizontal,
                              children: <Widget>[
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 1'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weigth Loss Workout 2'),
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 3'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weight Loss Workout 4'),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),

Answer 1

将容器包装在InkWell中，并在onTap回调函数中调用navigation.push。

样例代码

 Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("Weight Loss Workouts", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.lime[700], fontSize: 25),),
                          SizedBox(height: 20,),
                       InkWell(
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => OrderDetailsPage(),
                              ),
                            );
                          },
                    child: Container(
                            height: 200,
                            child: ListView(
                              scrollDirection: Axis.horizontal,
                              children: <Widget>[
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 1'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weigth Loss Workout 2'),
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 3'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weight Loss Workout 4'),
                              ],
                            ),
                          ),
                         ),
                        ],
                      ),

)

检查更多关于 https://api.flutter.dev/flutter/material/InkWell-class.html

如果您不想触摸反馈，请同时检查 GestureDetector: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html