我试着用里面有ColumnClipRect,但是好像不太好用.

我想要实现的是裁剪该列的内容,并在存在溢出时显示一条文本消息(如果该列的内容无法在可用空间内显示).

你有什么建议吗?我怎样才能做到这一点?

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来实现你的目标.请try 将值为Clip.antiAliasclipBehavior参数添加到您的Stack小部件.

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."),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

How to get height of a Widget?给出了如何判断小部件高度和添加带有溢出消息的文本的答案

Flutter相关问答推荐

ListView内的ListView正在一次构建所有项目

如何使一个悬浮的appbar在flutter?

DART 3.3:为什么扩展类型不起作用?

来自FutureProvider的数据只打印两个不同的变量,它们对一个实例只有一次相同的值,为什么?

升级到Ffltter 3.16后,应用程序栏、背景 colored颜色 、按钮大小和间距都会发生变化

如何使DropDownMenu宽度等于TextFormfield?

如何在Flutter 安全存储器中存储对象值?

在Dart中使用Riverpod代码生成时出现问题(addListener)

我如何在Android 13中通过Flutter应用程序打开文件(不是图像、视频或音频)?

如何在点击查看措辞下方添加句子?

在 Flutter 中使用条件语句设置 ImageProvider Object 类型的背景图像

如何给按钮的边框半径?

Flutter开发中,如何通过'nfc_manager'插件在Android设备上避免默认的New Tag Scanned弹出窗口?

我的第一个 flutter 项目出错,启动时为空值?

减少 Flutter 中 API 的连接等待时间

Flutter RIverpod 奇怪地改变状态

具有 BLOC 和存储库模式的 Flutter Workmanager

alert 对话框内的 ListView 显示空的透明窗口

Flutter/Dart 返回_Future的实例而不是实际的字符串值

TextSpan 避免符号字符串组上的换行符