如何使该部分可单击,以便可以导航到另一个页面,并具有希望能够导航到并播放视频的图片网格。
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'),
],
),
)
],
),
),
最佳答案
将容器包装在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
关于flutter - 如何使容器可点击,以及如何在单击时导致其他页面 flutter ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61158749/