enter image description hereI want to show the Divider when the text will end. It will close on the 1st line, 2nd line or 3rd line. After that the Divider will show the remaning space. I want to achieve the above image UI.

Row(
  children: <Widget>[
    Flexible(
      flex: 1 /*or any integer value above 0 (optional)*/,
      child: Padding(
        padding: const EdgeInsets.only(left: 8.0, right: 8),
        child: Row(
          children: <Widget>[
            list[index].event!.name!.length > 40 ? Container(
              width: MediaQuery.of(context).size.width /1.1,
              color: Colors.transparent,
              child: Text(
                list[index].event!.name!,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(
                  color: white,
                ),
              ),
            ) :
              Expanded(
                flex: 0 /*or any integer value above 0 (optional)*/,
                child: Text( list[index].event!.name!,
                style: const TextStyle(
                  color: white,
                  overflow: TextOverflow.ellipsis,
                ),
                )),
            Expanded(child:Divider(color: appTextColor.withOpacity(0.2)))
          ],
        ),
      ),
    ),

如何实现此行为(虚线应为分隔符):

短文本

LOOOOOUOONG文本

Tooooooooooooooooooo
Long Text ----------------- // <- Divider should be here then

推荐答案

我能够达到所需的结果.

main.dart:

import 'package:flutter/material.dart';
import 'package:test_flutter/divider_text.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const TextStyle textStyle = TextStyle(fontSize: 32);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Test'),
      ),
      body: Column(
        children: [
          const DividerText(
            'Title',
            style: textStyle,
            indent: 4.0,
            endIndent: 4.0,
            dividerThickness: 2.0,
          ),
          const SizedBox(height: 64.0),
          DividerText(
            'Title' * 100,
            style: textStyle,
            indent: 4.0,
            endIndent: 4.0,
            dividerThickness: 2.0,
          ),
        ],
      ),
    );
  }
}

divider_text.dart:

import 'package:flutter/material.dart';

class DividerText extends StatelessWidget {
  const DividerText(this.text, {
    super.key,
    this.width,
    this.style,
    this.indent,
    this.endIndent,
    this.dividerThickness,
    this.dividerColor,
  });

  final double? width;
  final String text;
  final TextStyle? style;
  final double? indent;
  final double? endIndent;
  final double? dividerThickness;
  final Color? dividerColor;

  @override
  Widget build(BuildContext context) {
    var screenWidth = width ?? MediaQuery.of(context).size.width;
    var textInfo = (TextPainter(
      text: TextSpan(text: text, style: style),
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: screenWidth)).computeLineMetrics().last;
    var lastWidth = textInfo.width % screenWidth;
    var dividerWidth = screenWidth - lastWidth;
    return SizedBox(
      width: screenWidth,
      height: textInfo.height * (textInfo.lineNumber + 1),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: SizedBox(
              width: dividerWidth,
              child: Divider(
                height: textInfo.height,
                thickness: dividerThickness ?? 1.0,
                indent: indent,
                endIndent: endIndent,
                color: dividerColor ?? style?.color ?? DefaultTextStyle.of(context).style.color,
              ),
            ),
          ),
          Text(text, style: style),
        ],
      ),
    );
  }
}

Here's the screenshot: The Result

Flutter相关问答推荐

Flutter 中不存在URI的目标

错误:找不到字体功能类型.Ffltter Google_Fonts包错误

如何在WidgetRef引用外部的函数中使用Riverpod刷新数据

如何在Flutter 中不从getX库中初始化GetxController中的变量

Firebase存储不显示在Flutter 中链接的图像

在Flutter 小部件测试中找不到框中的AssetImage装饰

Flutter 渲染HTML和数学(LaTeX和Katex)

Firebase WHERE过滤器在日期字段中不起作用

dart /长笛中的返回早期模式和拆分方法

StateNotifer正在riverpod中提供初始状态值(bool)

Flutter 构建 Web 分段故障 - 无法启动事件处理程序线程

打开键盘时屏幕组件会被压扁

如何在 VS Code 中启用 Flutter 运行/调试工具栏?

仅在获取(读取)、Provider 时,Firestore 中的数据为空

如何在两个不同的路由(屏幕)之间正确设置 BlocProvider?

在提供程序包更改通知程序中构建倒计时时钟

如何将 List 转换为 String []?

从物理设备 Flutter 中移除 USB 后启动画面不可见?

gridview 的所有按钮都应该在Flutter 中适合其父容器

如何从 Firebase Firestore 中获取具有特定字段值的文档?