Question

下面介绍的是Flutter中的SingleChildScrollView小部件实例的两个示例。

以下是示例1和2的正文的共同点。

固定大小的容器
带有一行容器的容器。容器行嵌入在
沿水平方向显示SingleChildScrollView。
固定大小的容器
带有一行容器的容器。容器行嵌入在
沿水平方向显示SingleChildScrollView。

两个示例之间的主要区别在于：

示例1：垂直方向上的SingleChildScrollView环绕1,2,3,4

而

示例2：SingleChildScrollView在垂直方向上仅包裹在 2,3,4。在Vertical中将1留在SingleChildScrollView的范围之外方向。

示例1运行正常，但示例2给出了以下例外。

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 441 pixels on the bottom.

示例2的第一个容器（1）应该保持静止，而2,3和4应该是可滚动的。我该如何进行示例2的工作？

示例1：

class ScrollExample extends StatelessWidget {
  double mWidth;

  @override
  Widget build(BuildContext context) {
    mWidth = MediaQuery.of(context).size.width;
    return SingleChildScrollView(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: mWidth,
          height: 400,
          color: Colors.indigo,
          margin: EdgeInsets.symmetric(vertical: 8.0),
          alignment: Alignment.center,
          child: Text("Fixed Box"),
        ),
        Container(
          width: mWidth,
          height: 200,
          margin: EdgeInsets.symmetric(vertical: 8.0),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: getChildren(),
            ),
          ),
        ),
        Container(
          width: mWidth,
          height: 400,
          color: Colors.brown,
          margin: EdgeInsets.symmetric(vertical: 8.0),
          alignment: Alignment.center,
          child: Text("Fixed Box"),
        ),
        Container(
          width: mWidth,
          height: 200,
          margin: EdgeInsets.symmetric(vertical: 8.0),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: getChildren(),
            ),
          ),
        ),
      ],
    ));
  }
}

示例2：

class ScrollExample extends StatelessWidget {
  double mWidth;

  @override
  Widget build(BuildContext context) {
    mWidth = MediaQuery.of(context).size.width;
    return Column(
      children: [
        Container(
          width: mWidth,
          height: 400,
          color: Colors.indigo,
          margin: EdgeInsets.symmetric(vertical: 8.0),
          alignment: Alignment.center,
          child: Text("Fixed Box"),
        ),
        SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              Container(
                width: mWidth,
                height: 200,
                margin: EdgeInsets.symmetric(vertical: 8.0),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: getChildren(),
                  ),
                ),
              ),
              Container(
                width: mWidth,
                height: 400,
                color: Colors.brown,
                margin: EdgeInsets.symmetric(vertical: 8.0),
                alignment: Alignment.center,
                child: Text("Fixed Box"),
              ),
              Container(
                width: mWidth,
                height: 200,
                margin: EdgeInsets.symmetric(vertical: 8.0),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: getChildren(),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}

下面的代码与示例1和2相同

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: ScrollExample(),
      ),
    );
  }
}

List<Widget> getChildren() {
  List<Widget> output = List();
  List<Color> colorList = [
    Colors.redAccent,
    Colors.deepOrange,
    Colors.orangeAccent,
    Colors.yellow,
    Colors.lightGreenAccent,
    Colors.green,
    Colors.greenAccent,
    Colors.blue,
    Colors.purpleAccent,
    Colors.pink,
  ];
  for (int i = 0; i < 10; i++) {
    output.add(Container(
      width: 140,
      height: 200,
      color: colorList[i],
    ));
  }

  return output;
}

在另一个SingleChildScrollView（水平）内摇动SingleChildScrollView（垂直）

0 个答案: