dart - 行中的多个 PageView 小部件

Question

目标

我只是想在 Column Widget 中创建一个包含多个 PageView Widget 的 Widget，供用户滚动浏览。

文档说:

Each child of a page view is forced to be the same size as the viewport.

这是为什么？ 在 Android 中，我只会使用 wrap_content 来适应 child 的高度。

重现步骤

创建一个“屏幕”并将其作为主屏幕启动:

class HomeScreen extends StatefulWidget {
  @override
  State createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Flexible(
              child: new PageView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return new RaisedButton(
                        color: Colors.green,
                        child: new Text(index.toString()),
                        onPressed: () {});
                  },
                  itemCount: 6))
        ]);
  }

日志

当我删除 Flexible 小部件时，它给我这个错误:

I/flutter (19887): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (19887): The following assertion was thrown during performResize():
I/flutter (19887): Horizontal viewport was given unbounded height.
I/flutter (19887): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (19887): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (19887): vertical space in which to expand.

flutter 医生

[✓] Flutter (on Mac OS X 10.12.5 16F73, locale nl-NL, channel master)
    • Flutter at /development/flutter
    • Framework revision 46b2e88612 (14 hours ago), 2017-07-17 22:51:56 -0700
    • Engine revision c757fc7451
    • Tools Dart version 1.25.0-dev.4.0

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/theobouwman/Library/Android/sdk
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b
    • ios-deploy 1.9.0
    • CocoaPods version 1.1.1

[✓] Android Studio
    • Android Studio at /Applications/Android Studio 3.0 Preview.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-884-b01)

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.1.5)
    • Flutter plugin version 15.1
    • Dart plugin version 171.4694.29

[✓] Connected devices
    • Nexus 5X • 0259749fb8c21037 • android-arm • Android 7.1.2 (API 25)

Answer 1

PageView 的页面占用其 Viewport 的完整大小。但是您可以根据需要调整 Viewport 的大小。

例如，在此屏幕截图中，PageView 为 100 x 100:

您看到断言失败的原因是 Flex 布局模型(由 Column 使用)需要确定非 Flexible 子项在主轴(垂直)方向。 PageView 没有最大高度，它需要来自父级的尺寸信息，而 Column 需要来自其子级的尺寸信息。只需将 PageView 包装在具有大小信息的小部件中，例如Container 和 Column 将很乐意像任何其他小部件一样对其进行布局。

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  State createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Container(
          height: 100.0,
          width: 100.0,
          child: new PageView.builder(
            itemBuilder: (BuildContext context, int index) {
              return new RaisedButton(
                color: Colors.green,
                child: new Text(index.toString()),
                onPressed: () {});
            },
            itemCount: 6))
      ]);
  }
}

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new Material(
      child: new HomeScreen(),
    ),
  ));
}