Flutter Web 的行内的 GridView

Question

我试图将 gridview 放在一行中进行 flutter web 开发，但我遇到了一些错误

抛出另一个异常：垂直视口被赋予无限高度。 36 抛出另一个异常：断言失败：file:///C:/dev/flutter/packages/flutter/lib/src/rendering/box.dart:1972:12 抛出了另一个异常：无法测试从未布局过的渲染框。

有代码：

import 'package:cleanvideos/extensions/theme_extesion.dart';
import 'package:cleanvideos/extensions/widget_layout_extension.dart';
import 'package:cleanvideos/models/contents/video_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ContentViewBuilder extends StatefulWidget {
  final String? title;
  final String? subtitle;
  final String? label;
  final List<ModelVideo> videos;
  final EdgeInsets? titlePadding;
  const ContentViewBuilder({
    super.key,
    this.title,
    this.subtitle,
    this.label,
    required this.videos,
    this.titlePadding,
  });

  @override
  State<ContentViewBuilder> createState() => _ContentViewBuilderState();
}

class _ContentViewBuilderState extends State<ContentViewBuilder> {
  bool isAudioView = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), //TODO Implementar AppBar
      body: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                widget.label ?? "",
                style:
                    context.textTheme.titleMedium?.copyWith(color: Colors.grey),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(widget.title ?? "",
                      style: context.textTheme.titleLarge
                          ?.copyWith(fontWeight: FontWeight.bold)),
                  Text(
                    widget.subtitle ?? "",
                    style: context.textTheme.titleLarge
                        ?.copyWith(color: Colors.grey),
                  )
                ],
              ).withPadding(const EdgeInsets.only(left: 16))
            ],
          ).withPadding(widget.titlePadding ?? const EdgeInsets.only(left: 16)),
          const Divider(
            height: 0,
            color: Color(0xff0038B8),
          ).withPadding(const EdgeInsets.only(top: 16)),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  FilledButton(
                      style: FilledButton.styleFrom(
                          backgroundColor: !isAudioView
                              ? const Color(0xffebeffa)
                              : Colors.transparent,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                          fixedSize: const Size(114, 43)),
                      onPressed: () {
                        setState(() {
                          isAudioView = false;
                        });
                      },
                      child: Text(
                        "Videos",
                        style: TextStyle(
                            color: !isAudioView
                                ? const Color(0xff0038B8)
                                : const Color(0xff7f9bdb)),
                      )),
                  FilledButton(
                      style: FilledButton.styleFrom(
                          backgroundColor: isAudioView
                              ? const Color(0xffebeffa)
                              : Colors.transparent,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                          fixedSize: const Size(114, 43)),
                      onPressed: () {
                        setState(() {
                          isAudioView = true;
                        });
                      },
                      child: Text(
                        "Músicas",
                        style: TextStyle(
                            color: isAudioView
                                ? const Color(0xff0038B8)
                                : const Color(0xff7f9bdb)),
                      ))
                ],
              ).withPadding(
                  const EdgeInsets.only(left: 62, top: 47, right: 24)),
              const SizedBox(
                height: 691,
                child: VerticalDivider(
                  thickness: 1,
                  indent: 0,
                  endIndent: 0,
                  color: Color(0xff0038B8),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class GridContentView extends StatelessWidget {
  final bool isAudioView;
  const GridContentView({super.key, required this.isAudioView});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 1140,
        child: Expanded(
          child: SingleChildScrollView(
            child: GridView.count(
              crossAxisCount: isAudioView ? 5 : 3,
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
              children: List.generate(10, (index) {
                return Container(
                  height: 300,
                  width: isAudioView ? 200 : 500,
                  color: Colors.red,
                );
              }),
            ),
          ),
        ));
  }
} 

我尝试了 Expanded 和 sizedBox，但它们都给了我同样的错误

Answer 1

该部分导致该错误，嵌套滚动视图：

SingleChildScrollView(
            child: GridView()
          ) 

1. 使用 Container 或 SizedBox 等小部件为网格视图提供固有高度

2. 如果网格视图的滚动方向是垂直的：

将

pysics

的

GridView

设置为

NeveScrollableScrollPhysics()

，将

shrinkWrap

设置为

true.

修复

SingleChildScrollView(
 child: Container(
     height : MediaQuery.of(context).size.height/2,  // any height
     child: GridView.count(
         physics: NeverScrollableScrollPyhsics(),
         shrinkWrap: true,
         .....
             )
   )

希望对您有帮助。