代码之家 › 专栏 › 技术社区 › Chen Li Yong

在flatter中,如何使一个溢出的文本省略号,但同时如果它的字符串内容很短,它也会缩小?

flutter

Chen Li Yong · 技术社区 · 4 年前

例如,我有一个树小部件:

Row(children: [
  Expanded(flex: 1, child: 
    Text(someStringVariable, overflow: TextOverflow.ellipsis)),
  Flexible(flex: 0, child: 
    Icon(Icons.check)),
]);

这大致可以转化为:

|Lorem                     (check)|
|Lorem Ipsum               (check)|
|Lorem Ipsum Dolor sit A...(check)|

我需要的是:

|Lorem(check)                     |
|Lorem Ipsum(check)               |
|Lorem Ipsum Dolor sit A...(check)|

我如何修改上面的代码,使其像后面的代码一样输出?

2 回复 | 直到 4 年前

salihgueler 4 年前

您缺少的是添加一个额外的扩展。扩展将填充可用空间。相反,你只需要使用一个灵活的,就是它。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: Text(
              'TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText',
              overflow: TextOverflow.ellipsis),
        ),
        Icon(Icons.check),
      ],
    );
  }
}

你可以在dartpad上运行这个。dev并确保一旦你删除了一些文本,它就会按照你的意愿运行。

编辑:

一两句关于灵活、扩展和FlexFit的话。

Expanded实际上是从具有不同FlexFit的FlexFit扩展而来。它使用FlexFit。紧到填满可用区域。灵活的另一方面,它不会使用紧,但会使用FlexFit。释放

如果同时使用它们,Expanded将覆盖可用空间以方便使用。这就是为什么它没有像预期的那样工作。

lava 4 年前

Row(children: [
  Flexible(child: Text("Lorem Ipsum", overflow: TextOverflow.ellipsis)),
  Icon(Icons.check),
])

你可以使用flexible代替扩展的widget。因为扩展的widget会根据row widget的子元素在一行中占据全部空间

样本码

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

void main() {
  runApp(Material(child: MYAppWithoutFlicker()));
}

class MYAppWithoutFlicker extends StatelessWidget {
  MYAppWithoutFlicker({Key? key}) : super(key: key);
  var s = Scaffold(
    appBar: AppBar(),
    // color: Colors.lightGreen,
    body: TestWidget(),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: s);
  }
}

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

 

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(children: [
          Flexible(child: Text("Lorem", overflow: TextOverflow.ellipsis)),
          Icon(Icons.check),
        ]),
        Row(children: [
          Flexible(child: Text("Lorem Ipsum", overflow: TextOverflow.ellipsis)),
          Icon(Icons.check),
        ]),
        Row(children: [
          Flexible(
            flex: 2,
            child: Text(
                "Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...",
                overflow: TextOverflow.ellipsis),
          ),
          Icon(Icons.check),
        ]),
      ],
    );
  }
}