Question

目的

我只想在PageView小部件中创建一个包含多个Column小部件的小部件，供用户滚动。

文件说：

页面视图的每个子节点都被强制与视口大小相同。

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

重现步骤

创建一个＆＃34;屏幕＆＃34;并将其作为主屏幕启动：

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 Doctor

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

Row中的多个PageView小部件

目的

重现步骤

日志

Flutter Doctor

1 个答案: