如何在 YoutubePlayerScaffold 内的 Flutter ListView.separated 中启用滚动

Question

我有一个 Flutter 应用程序，其中包含一个包含 ListView.separated 的 YoutubePlayerScaffold。我想在 ListView.separated 中启用滚动，同时避免在 YouTube 播放器中退出全屏模式时出现 renderflex 错误。我怎样才能实现这个目标？

import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class PlyrOneScreen extends StatelessWidget {
  final String url;
  PlyrOneScreen({Key? key, required this.url}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: YoutubePlayerScaffold(
        builder: (context, player) {
          return SingleChildScrollView(
            //scrollDirection: Axis.horizontal,
            child: Column(
              //mainAxisSize: MainAxisSize.min,
              children: [
                player,
                ListView.separated(
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return Text(
                      'data $index',
                      style: TextStyle(color: Colors.white, fontSize: 15),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Divider(
                      height: 3,
                    );
                  },
                  itemCount: 100,
                ),
              ],
            ),
          );
        },
        controller: YoutubePlayerController.fromVideoId(
          videoId: 'Nen3UXaWDDE',
          params: const YoutubePlayerParams(
            showFullscreenButton: true,
            
          ),
        ),
      ),
    );
  }
}

我的 Flutter 应用程序布局遇到问题。我有一个 YoutubePlayerScaffold，其中包含一个 ListView.separated 小部件。当我用 Expanded 小部件包装 ListView.separated 以启用滚动时，我可以滚动列表，但在退出全屏模式（将屏幕方向从横向更改为纵向）时遇到 renderflex 错误。另一方面，当我在列周围添加 SingleChildScrollView 并删除 Expanded 小部件时，退出全屏时的 renderflex 错误得到解决，但我无法再滚动列表。我正在寻找一种解决方案，允许在 ListView.separated 中滚动，而不会在退出全屏时遇到 renderflex 错误。

Answer 1

这是您的无错误和无警告的代码。我对代码做了一些增强。请随意尝试和测试。我使 YouTube 播放器固定且列表视图可滚动。如果您还想要其他东西，请在下面留言。

源代码：

import "package:flutter/material.dart";
import "package:youtube_player_iframe/youtube_player_iframe.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My App",
      theme: ThemeData(colorSchemeSeed: Colors.blue, useMaterial3: true),
      home: const PlayerScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class PlayerScreen extends StatelessWidget {
  const PlayerScreen({super.key});

  static String videoId = "ggG9ySCChYw";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: OrientationBuilder(
        builder: (BuildContext context, Orientation orientation) {
          return orientation == Orientation.portrait
              ? SafeArea(bottom: false, child: mainWidget())
              : mainWidget();
        },
      ),
    );
  }

  Widget mainWidget() {
    return YoutubePlayerScaffold(
      controller: YoutubePlayerController.fromVideoId(
        videoId: videoId,
        params: const YoutubePlayerParams(showFullscreenButton: true),
        autoPlay: true,
      ),
      builder: (BuildContext context, Widget player) {
        return Column(
          children: <Widget>[
            SizedBox(
              height: MediaQuery.of(context).size.height / 4,
              width: MediaQuery.of(context).size.width,
              child: player,
            ),
            Expanded(
              child: ListView.separated(
                itemCount: 20,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    dense: true,
                    leading: const Icon(Icons.star),
                    title: Text("Title: $index"),
                    subtitle: Text("Subtitle: $index"),
                    trailing: const Icon(Icons.arrow_forward_ios),
                    onTap: () {},
                  );
                },
                separatorBuilder: (BuildContext context, int index) {
                  return const Divider(height: 1, thickness: 1);
                },
              ),
            ),
          ],
        );
      },
    );
  }
}