重新呈现溢出屏幕的Widget(Flutter)

xytpbqjk  于 2022-11-25  发布在  Flutter
关注(0)|答案(2)|浏览(180)

我正在创建一个小部件,它向用户显示文件系统中的当前路径。
例如,以下是windows文件路径。

打开每个文件夹时,文件夹名称都会添加到路径中。问题是,当添加到路径中的文件夹太多时,行会溢出。Windows通过将多余的文件夹截断到左侧

来解决此问题
如何确定小部件是否会溢出,然后在移除溢出部分的情况下呈现它?
我尝试过一种使用TextPainter计算文件路径长度的方法,但是由于我的文件路径小部件不是纯文本(图标、填充等),结果很粗糙,并不总是完美的工作。

kfgdxczn

kfgdxczn1#

你可以在你的小工具中使用一个全局键,它会告诉你当前小工具的大小。

GlobalKey stickyKey = GlobalKey();
Container(
  key: _widgetKey,
),

您可以随时随地使用它:

void _getWidgetInfo(_) {
    final RenderBox renderBox = _widgetKey.currentContext?.findRenderObject() as RenderBox;
 
    final Size size = renderBox.size; // or _widgetKey.currentContext?.size
    print('Size: ${size.width}, ${size.height}');
 
    final Offset offset = renderBox.localToGlobal(Offset.zero);
    print('Offset: ${offset.dx}, ${offset.dy}');
    print('Position: ${(offset.dx + size.width) / 2}, ${(offset.dy + size.height) / 2}');
  }

我猜你有一个方法,当你移动到新的文件夹时,你会调用这个方法,然后当你移动到新的文件夹时,你会调用_getWidgetInfo方法来计算新的长度。

qnakjoqk

qnakjoqk2#

这对你有用吗?它会修剪/裁剪左边的内容/开始填充所有可用的右边/结尾内容。

输出:

完整代码:

import 'package:flutter/material.dart';

void main() => runApp(const CodeCyanApp());

class CodeCyanApp extends StatelessWidget {
  const CodeCyanApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Icon(Icons.folder),
            const SizedBox(width: 5),
            Expanded(
              child: Stack(
                alignment: AlignmentDirectional.centerEnd,
                children: [
                  Positioned(
                    top: 0,
                    child: Wrap(
                      spacing: 5,
                      children: const [
                        Text('>'),
                        Text('Windows'),
                        Text('>'),
                        Text('Programs'),
                        Text('>'),
                        Text('CodeCyan'),
                        Text('>'),
                        Text('Utilities'),
                        Text('>'),
                        Text('Flutter'),
                        Text('>'),
                        Text('Wrap'),
                        Text('>'),
                        Text('Neted'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(width: 5),
            const Icon(Icons.arrow_downward),
            const SizedBox(width: 5),
            const Icon(Icons.refresh),
          ],
        ),
      ),
    );
  }
}

相关问题