TabViewBar 不可滚动

Question

我有一个 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,
                            );
                          }),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

我设法解决了。我做了什么：

• 我没有从顶部包裹

  SingleChildScrollView

  ，而是仅在缩略图区域之后包裹

  SingleChildScrollView

  小部件。我为其他
ListView
• 设置了

  NeverScrollableScrollPhysics

  ：（1）选项卡名称（“成分”和“说明”），（2）成分和说明的列表视图。
我最终的详情页代码是：

ListView