时间戳

首页 > 解决方案 > 当子项的大小超过屏幕大小时处理堆栈

flutter - 当子项的大小超过屏幕大小时处理堆栈

问题描述

当孩子的尺寸小于屏幕尺寸时，使用 Stack 很容易控制布局。但是当孩子的身高大于屏幕尺寸时，就需要使用SingleChildScrollView. 但是如果我使用它，整个屏幕会变白并产生如下所示的错误。

在这些情况下使用Stack&时如何处理布局。SingleChildScrollView任何帮助是极大的赞赏。谢谢你。

示例代码

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: SingleChildScrollView(
            child: Stack(
              fit: StackFit.expand,
              children: [
                _Background(),
                Positioned(left: 0, top: 100, child: WidgetA()),
                Positioned(left: 0, top: 270, child: WidgetB()),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _Background extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
    );
  }
}

class WidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: randomHeight(),
      width: MediaQuery.of(context).size.width,
      color: Colors.purple,
      child: Center(
        child: Text('Widget A'),
      ),
    );
  }
}

class WidgetB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      width: MediaQuery.of(context).size.width,
      color: Colors.yellow,
      child: Center(
        child: Text('Widget B'),
      ),
    );
  }
}

错误

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#2e73f relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'

The relevant error-causing widget was
Scaffold
lib/main.dart:11
════════════════════════════════════════════════════════════════════════════════

标签： flutterflutter-layout

解决方案

原因：

SingleChildScrollView 提供无限空间。

堆栈自己调整大小以包含所有未定位的子项，这些子项根据对齐方式进行定位（在从左到右的环境中默认为左上角，在从右到左的环境中默认为右上角）。然后根据它们的 top、right、bottom 和 left 属性相对于堆栈放置定位的子项。

小部件永远膨胀。

它还会导致 StackRender 算法出现问题，因为这将处理 Zenith。

在此处的 api 文档中阅读更多信息。

解决方案给它一个约束，例如 SizedBox();

推荐阅读