Flutter Single Child Scroll View，列中的每个项目占据父级高度的 1/3

Question

我正在尝试创建占父 space 的 1/3 并且可滚动的 3 对多小部件。我尝试使用 FractionallySizedBox 来获取父级可用空间的 1/3 space，但是，当我将它放入 SingleChildScrollView 时，它会抛出错误：

════════渲染库捕获异常════════════════════════════════ ═ RenderBox 未布局：RenderPointerListener#6dc20 relayoutBoundary=up8 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': 断言失败：第 1702 行第 12 行：'hasSize' 相关的导致错误的小部件是 SingleChildScrollView

这是我的尝试

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Title'),
      ),
      body: Container(height: 100, child: SingleChildScrollView(
        child: Column(
          children: [
            for (var i = 0; i < 4; i++) 
              FractionallySizedBox(heightFactor: 1 / 3, child: Text("Text"),)
          ],
        ),
      ),
    ));

这是我试图用 HTML 和 CSS

完成的

<style>
        .container {
          height: 200px;
          overflow: scroll;
        }
        .box {
          height: 33%
        }
      </style>

      <div class="container">
          <div class="box" style="background-color: red"></div>
          <div class="box" style="background-color: blue"></div>
          <div class="box" style="background-color: green"></div>
          <div class="box" style="background-color: yellow"></div>
        </div>

Answer 1

使用 Row 或 Column 时，如 short_video_by_flutter 所示，将您的 FractionallySizedBox 包装成灵活的：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Title'),
      ),
      body: Container(height: 100, child: SingleChildScrollView(
        child: Column(
          children: [
            for (var i = 0; i < 4; i++) 
              Flexible(
                  child: FractionallySizedBox( 
                             heightFactor: 1 / 3,  
                             child: Text("Text"),
                         ),
              ),
          ],
        ),
      ),
    ));

Answer 2

了解您的需求并修改建议。
在 200 高度容器中每个项目的高度为 200/3 并且可滚动。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Container(
        height: 200,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints viewportConstraints) {
            return SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  for (var i = 0; i < 4; i++)
                    Container(
                      height: viewportConstraints.maxHeight / 3,
                      color: Colors.grey.withOpacity(0.8),
                      child: Text("Text$i"),
                    ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Flutter Single Child Scroll View，列中的每个项目占据父级高度的 1/3

Flutter Single Child Scroll View with each item in column taking up 1/3 of the parent's height

responsive-design

dart

flutter