Row中的多个PageView小部件

Question

目的

我只想在Widget中创建一个包含多个PageViewWidgets的ColumnWidget,供用户滚动浏览.

文件说:

页面视图的每个子项都被强制与视口大小相同.

为什么是这样？在Android中我只会wrap_content用来调整孩子的身高.

重现步骤

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

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))
        ]);
  }

日志

当我删除FlexibleWidget它给我这个错误:

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 (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(),
    ),
  ));
}