时间戳

首页 > 解决方案 > 在另一个 SingleChildScrollView(Vertical) 中颤动 SingleChildScrollView(Horizo​​ntal)

flutter - 在另一个 SingleChildScrollView(Vertical) 中颤动 SingleChildScrollView(Horizo​​ntal)

问题描述

如何在下面附加的另一个 SingleChildScrollView(Vertical) 代码中使 Flutter SingleChildScrollView(Horizo​​ntal) 工作？

我收到以下异常：

未处理的异常：无法测试没有大小的渲染框。在此 RenderBox 上调用了 hitTest() 方法：_RenderScrollSemantics#0e053：需要合成创建者：_ScrollSemantics-[GlobalKey#35899] ← 可滚动 ← SingleChildScrollView ← ColoredBox ← ConstrainedBox ← Container ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#364d1] ← Semantics ← Listener ← _GestureSemantics ← ⋯ parentData: (可以使用大小) 约束: BoxConstraints(w=414.0, h=896.0) 语义边界大小: MISSING 虽然这个节点没有标记为需要布局，但它的大小没有设置。RenderBox 对象必须具有明确的大小才能进行命中测试。确保有问题的 RenderBox 在布局期间设置其大小。#0 RenderBox.hitTest。(package:flutter/src/rendering/box.dart:2386:9) #1 RenderBox.hitTest (package:flutter/src/rendering/box.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HomeScreen(),
      ),
    );

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Grid Demo'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: SizeConfig.screenWidth,
              height: SizeConfig.screenHeight,
              color: Colors.grey[200],
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Grid(),
              ),
            ),
            SizedBox(
              height: 50,
            ),
            Container(color: Colors.grey, height: 200),
          ],
        ),
      ),
    );
  }
}

class Grid extends StatelessWidget {
  List<Positioned> getUnits() {
    double _unitRadius = 50;
    List<Positioned> _units = [];
    double _leftCoordinate = 0;
    double _bottomCoordinate = 0;
    double _margin = 5;
    double _stepFromLeft = _unitRadius + _margin;
    double _stepFromBottom = _unitRadius + _margin;

    int _maxColumns = 10;
    int _maxRows = 10;

    for (int i = 0; i < _maxRows; i++) {
      for (int j = 0; j < _maxColumns; j++) {
        _units.add(Positioned(
            bottom: _bottomCoordinate,
            left: _leftCoordinate,
            child: Container(
              width: _unitRadius,
              height: _unitRadius,
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Center(child: Text('$i $j')),
            )));
        _leftCoordinate += _stepFromLeft;
      }
      _leftCoordinate = 0;
      _bottomCoordinate += _stepFromBottom;
    }

    return _units;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: getUnits(),
    );
  }
}

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth;
    blockSizeVertical = screenHeight;
    _safeAreaHorizontal =
        _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    _safeAreaVertical =
        _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;

    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal);
    safeBlockVertical = (screenHeight - _safeAreaVertical);
  }
}

标签： flutter

解决方案

在这里，您的 SingleChildScrollView 项目将垂直滚动，ListView.builder 项目将水平绘制项目（默认情况下），如果是列表视图构建器，您需要修复特定/动态高度以避免错误。

SingleChildScrollView(
      child: Container(
          height: 100,
             child: ListView.builder(
                  itemBuilder: ...),
              ),
            )

& 在您的代码中，使用：

   Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.max,

推荐阅读