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

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

1 个答案: