如何使帶有 Tabs 和 TabBarViews 的屏幕都可以在顫動中滾動？

Question

我一直在嘗試將 SingleChildScrollView 添加到我的代碼中，以便包括 Tabs 和 TabBarViews 在內的整個頁面一起滾動。

RenderFlex 子項具有非零彈性，但傳入的高度約束是無界的水平視口被賦予了無界的高度。

這些是我在使整個頁面可滾動時遇到的錯誤。

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

import '../widgets/style_grid.dart';

class StyleScreen extends StatefulWidget {
  const StyleScreen({super.key});

  @override
  State<StyleScreen> createState() => _StyleScreenState();
}

class _StyleScreenState extends State<StyleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen')),
      body: SafeArea(
        child: DefaultTabController(
          length: 5,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              ButtonsTabBar(
                backgroundColor: Colors.grey[300],
                radius: 16,
                unselectedLabelStyle: TextStyle(color: Colors.black),
                labelStyle: TextStyle(
                    color: Colors.orange, fontWeight: FontWeight.bold),
                tabs: [
                  Tab(
                    icon: Icon(Icons.directions_car),
                    text: "All",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat1",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat2",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat3",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat4",
                  ),
                ],
              ),
              Expanded(
                child: TabBarView(
                  physics: NeverScrollableScrollPhysics(),
                  children: <Widget>[
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我想讓紅色區域可滾動。

Answer 1

嘗試將其包裝在以下類中。 這提供了垂直和水平滾動。

class ScrollableWidget extends StatelessWidget {
      final Widget child;
    
      const ScrollableWidget({Key? key, required this.child}) : super(key: key);
    
      @override
      Widget build(BuildContext context) => SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: child,
            ),
          );
    }

Answer 2

您可以使用NestedScrollView 。 最好使用ListView.builder或CustomScrollView而不是在StyleGrid上使用SingleChildScrollView

class StyleScreen extends StatefulWidget {
  const StyleScreen({super.key});

  @override
  State<StyleScreen> createState() => _StyleScreenState();
}

class _StyleScreenState extends State<StyleScreen>
    with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 5, vsync: this);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen')),
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverToBoxAdapter(
            child: tabBar(),
          )
        ],
        body: TabBarView(
          controller: controller,
          children: List.generate(
              5, (index) => SingleChildScrollView(child: StyleGrid())),
        ),
      ),
    );
  }

  ButtonsTabBar tabBar() {
    return ButtonsTabBar(
      controller: controller,
      backgroundColor: Colors.grey[300],
      radius: 16,
      unselectedLabelStyle: TextStyle(color: Colors.black),
      labelStyle: TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
      tabs: [
        Tab(
          icon: Icon(Icons.directions_car),
          text: "All",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat1",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat2",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat3",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat4",
        ),
      ],
    );
  }
}