我有一个页面视图有两个标签页Flutter应用程序。
我添加了滚动视图中的动态列表添加到它的标签。但是它是不可滚动的。
有人能解释一下吗？
这是两个标签页，都应该是可滚动的。但是这两个标签页都不是可滚动的。我试过在某些部分添加和删除physics: const NeverScrollableScrollPhysics()，但都不起作用。
下面是我的代码：
import 'package:flutter/material.dart';
import 'package:autoscale_tabbarview/autoscale_tabbarview.dart';
class RecipeDetailPage extends StatefulWidget {
final String recipeName;
final String estTimeMin;
final List availableIngredients;
final List missingIngredients;
final Map<String, dynamic> instructions;
final String thumbnailUrl;
const RecipeDetailPage({
super.key,
required this.recipeName,
required this.estTimeMin,
required this.availableIngredients,
required this.missingIngredients,
required this.instructions,
required this.thumbnailUrl,
});
@override
RecipeDetailPageState createState() => RecipeDetailPageState();
}
class RecipeDetailPageState extends State<RecipeDetailPage>
with SingleTickerProviderStateMixin {
late TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
String totalIngredients =
(widget.availableIngredients.length + widget.missingIngredients.length)
.toString();
return Scaffold(
appBar: AppBar(
title: Text(widget.recipeName),
),
body: SingleChildScrollView(
child:
// mainAxisSize: MainAxisSize.min,
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
children: [
Image.network(widget.thumbnailUrl),
const SizedBox(
height: 10,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icons.timer,
size: 15,
color: Colors.blueGrey,
),
const SizedBox(
width: 8,
),
Text(
"${widget.estTimeMin} mins",
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
],
),
SingleChildScrollView(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Align(
alignment: Alignment.centerLeft,
child: TabBar(
controller: _controller,
tabs: const [
Tab(
child: Text(
'Ingredients',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
Tab(
child: Text(
'Instructions',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
],
),
),
AutoScaleTabBarView(
controller: _controller,
children: <Widget>[
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
children: [
...widget.availableIngredients.map(
(ingredient) => ListTile(
leading: const Icon(
Icons.check_circle,
color: Colors.green,
size: 18,
),
title: Text(
ingredient,
style: const TextStyle(
fontSize: 18,
),
),
visualDensity: const VisualDensity(
horizontal: 0,
vertical: -4,
),
),
),
...widget.missingIngredients.map(
(ingredient) => ListTile(
leading: const Icon(
Icons.question_mark,
color: Colors.blue,
size: 18,
),
title: Text(
ingredient,
style: const TextStyle(
fontSize: 18,
),
),
visualDensity: const VisualDensity(
horizontal: 0,
vertical: -4,
),
),
),
],
),
ListView.separated(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: widget.instructions.length,
separatorBuilder: (BuildContext context, int index) =>
Divider(
color: Colors.blueGrey.withOpacity(0.5),
indent: 25,
endIndent: 25,
thickness: 2,
),
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.lightBlue,
radius: 15,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
(index + 1).toString(),
style: const TextStyle(
fontSize: 15,
color: Colors.white,
),
),
],
),
),
title: Text(
widget.instructions['step${index + 1}'],
style: const TextStyle(
fontSize: 18,
),
),
visualDensity: const VisualDensity(
horizontal: 2,
vertical: 2,
),
minLeadingWidth: 10,
);
}),
],
),
],
),
),
],
),
),
);
}
}
1条答案
按热度按时间c8ib6hqw1#
我设法解决了。我所做的：
SingleChildScrollView从顶部 Package ，而是让SingleChildScrollView只在缩略图区域之后 PackageListView小部件。ListView设置了NeverScrollableScrollPhysics：（1）标签名称（“配料”和“说明”），（2）配料和说明的列表视图。我的详细页面的最终代码是：