Dart 颤振-检测内容溢出并将其剪辑

我试着用一个内置的，但似乎不太好用

我想要实现的是剪切列的内容，并在出现溢出时显示文本消息（如果列的内容无法在可用空间内显示）

你有什么建议可以让我实现吗

import 'package:flutter/material.dart';

void main() => runApp(ContentOverflowDetectionApp());

class ContentOverflowDetectionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Overflow detection"),
        ),
        body: Stack(
          fit: StackFit.expand,
          children: [
            ClipRect(
              child: Column(
                children: [
                  Container(
                    width: 300,
                    height: 400,
                    color: Colors.green[200],
                    child: Text('first widget'),
                  ),
                  Container(
                    width: 350,
                    height: 350,
                    color: Colors.yellow[200],
                    child: Text('overflowed widget'),
                  ),
                ],
              ),
            ),
            Positioned(
              child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Text("SHOW THIS TEXT ONLY IF CONTENT HAS OVERFLOWED."),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

你不应该用ClipRect来实现你的目标。请尝试将溢出参数overflow.clip添加到堆栈小部件

import 'package:flutter/material.dart';

void main() => runApp(ContentOverflowDetectionApp());

class ContentOverflowDetectionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Overflow detection"),
        ),
        body: Stack(
          fit: StackFit.expand,
          clipBehavior: Clip.antiAlias,
          children: [
            Positioned(
              top: 0,
              child: Column(
                children: [
                  Container(
                    width: 300,
                    height: 400,
                    color: Colors.green[200],
                    child: Text('first widget'),
                  ),
                  Container(
                    width: 350,
                    height: 350,
                    color: Colors.yellow[200],
                    child: Text('overflowed widget'),
                  ),
                ],
              ),
            ),
            Positioned(
              child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Text("SHOW THIS TEXT ONLY IF CONTENT HAS OVERFLOWED."),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个解决方案只是修复了一个剪辑

给出了如何检查小部件高度并为需要“高度限制器”（限制其子部件高度的小部件，如果子部件想太高，请显示一些提示）的用户添加带有溢出信息的文本的答案。以下是我的代码片段，您可以复制和粘贴：

class HeightLimiter extends StatefulWidget {
  final Widget child;
  final double maxHeight;
  final double fadeEffectHeight;

  const HeightLimiter({Key key, this.maxHeight, this.child, this.fadeEffectHeight = 72}) : super(key: key);

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

class _HeightLimiterState extends State<HeightLimiter> {
  var _size = Size.zero;

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: widget.maxHeight,
      ),
      child: Stack(
        clipBehavior: Clip.hardEdge,
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: MeasureSize(
              onChange: (size) => setState(() => _size = size),
              child: widget.child,
            ),
          ),
          if (_size.height >= widget.maxHeight)
            Positioned(
              bottom: 0,
              left: 0,
              width: _size.width,
              child: _buildOverflowIndicator(),
            ),
        ],
      ),
    );
  }

  Widget _buildOverflowIndicator() {
    return Container(
      height: widget.fadeEffectHeight,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Colors.white.withAlpha(200),
            Colors.white.withAlpha(0),
          ],
          tileMode: TileMode.clamp,
        ),
      ),
    );
  }
}

类高度限制器扩展StatefulWidget{
最后一个孩子；
最终双倍最大高度；
最终双fadeEffectHeight；
常量高度限制器（{Key-Key，this.maxHeight，this.child，this.fadeEffectHeight=72}）：超级（Key:Key）；
@凌驾
_HeightLimiterState createState（）；
}
类_HeightLimiterState扩展状态{
var_size=size.zero；
@凌驾
小部件构建（构建上下文）{
返回约束框(
约束：BoxConstraints(
maxHeight:widget.maxHeight，
),
子：堆栈(
clipBehavior:Clip.hardEdge，
儿童：[
定位(
排名：0，
左:0,，
右:0,，
孩子：测量(
onChange：（size）=>setState（（）=>_size=size），
child:widget.child，
),
),
如果（_size.height>=widget.maxHeight）
定位(
底部：0，
左:0,，
宽度：_size.width，
子项：_buildOverflowIndicator（），
),
],
),
);
}
小部件_buildOverflowIndicator（）{
返回容器(
高度：widget.fadeEffectHeight，
装饰：盒子装饰(
梯度：线性梯度(
开始：对齐.bottomCenter，
结束：对齐。上止点，
颜色：[
颜色。白色。带有Alpha（200），
颜色。白色。带有alpha（0），
],
tileMode:tileMode.clamp，
),
),
);
}
}

而

MeasureSize

正好来自

当child过高时，结果如下所示（绿色子项溢出蓝色父项）；当孩子足够矮时，就不会有什么特别的表现

---

感谢@Aleksandr和@Dpedrinha的回答

您可以使用“SingleChildScrollView”而不是“Column”，恐怕我不需要滚动。另外，考虑到“列”支持的是child而不是child，我也不太理解如何在示例中使用“SingleChildScrollView”来代替“Column”。