Flutter

Question

我正在尝试创建一行，其中的中心文本具有最大大小，如果文本内容太大，它适合大小。

我插入 TextOverflow.ellipsis 属性来缩短文本并插入三重点 ... 但它不起作用。

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

结果：

预计：

Answer 1

您应该将 Container 包裹在 Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded 中也可以。

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

Answer 2

我认为需要为父 Container 指定适当大小的 maxWidth。看起来文本框将填充上面给出的任何内容 space。

Answer 3

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

只需包裹在一个小部件内，该小部件可以采用特定宽度来工作，否则它将采用父容器的宽度。

Answer 4

Wrapping whose child elements are in a row or column, wrap your column or row is new Flexible();

https://github.com/flutter/flutter/issues/4128

Answer 5

您可以使用此代码片段来显示带省略号的文本

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Answer 6

使用省略号

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

使用渐变

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

使用剪辑

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

注：

如果您在 Row 中使用 Text，您可以将 Text 放在 Expanded 中，例如：

Expanded(
  child: AboveText(),
)

Answer 7

修复一行中文本小部件溢出的一种方法，例如，一条聊天消息可能是一条很长的线。您可以创建一个 Container 和一个带有 maxWidth 的 BoxConstraint。

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

Answer 8

你可以这样做

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

Answer 9

首先，将 Row 或 Column 包装在 Expanded 小部件中

然后

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

Answer 10

根据你的情况，我认为这是下面的最佳方法。

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
        textAlign: TextAlign.center,
        child: Text('This is long text',
        constraints: BoxConstraints(maxWidth: maxWidth),
),

Answer 11

尝试：

 Expanded(
  child: Container(
      child: Text('OVER FLOW TEST TEXTTTT',
          overflow: TextOverflow.fade)),
),

这将显示 OVER FLOW。如果有溢出，将被处理。

Answer 12

如果您只是将文本作为列的子项放置，这是让文本自动换行的最简单方法。假设您没有发生任何更复杂的事情。在这些情况下，我认为您会创建您认为合适的容器大小，然后在其中放入另一列，然后放入文本。这似乎很好用。容器想要缩小到其内容的大小，这似乎自然地与包装发生冲突，后者需要更多的努力。

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('This long text will wrap very nicely if there isn\'t room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
      style: TextStyle(fontSize: 16, color: primaryColor),
      textAlign: TextAlign.center,),
  ],
),

Answer 13

1.剪辑

剪裁溢出的文本以适合其容器。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

2.fade

将溢出的文本淡化为透明。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

3.ellipsis

使用省略号表示文本溢出。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

4.visible

在容器外渲染溢出文本。

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

输出：

请写博客： https://medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316

Answer 14

包 assorted_layout_widgets 中有一个非常简单的 class TextOneLine。

只需将您的文本放入 class。

例如：

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      SvgPicture.asset(
        loadAsset(SVG_CALL_GREEN),
        width: 23,
        height: 23,
        fit: BoxFit.fill,
      ),
      SizedBox(width: 16),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextOneLine(
              widget.firstText,
              style: findTextStyle(widget.firstTextStyle),
              textAlign: TextAlign.left,
            ),
            SizedBox(height: 4),
            TextOneLine(
              widget.secondText,
              style: findTextStyle(widget.secondTextStyle),
              textAlign: TextAlign.left,
            ),
          ],
        ),
      ),
      Icon(
        Icons.arrow_forward_ios,
        color: Styles.iOSArrowRight,
      )
    ],
  )

Answer 15

    SizedBox(
                        width: width-100,
                        child: Text(
                          "YOUR LONG TEXT HERE...",
                          maxLines: 3,
                          overflow: TextOverflow.clip,
                          softWrap: true,
                          style: TextStyle(
                            fontWeight:FontWeight.bold,
                          ),
                        ),
                      ),

Answer 16

用 Expanded() 包装容器

Expanded (child: Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
),

Answer 17

使用省略号表示文本溢出。

SizedBox(
              width: 120.0,
              child: Text(
                "Enter Long Text",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                softWrap: false,
                style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),

Answer 18

您可以先将 Column 包裹在 Flexible 或 中Expanded 然后像往常一样使用 Text 它会自动结束。

Container(
  child: Row(
    children: [
      Flexible(
        child: Column(
          children: [
            Text("This text is so long and long and long and long and long and that's why it is not wrapping to next line.")
          ]
        ),
      )
    ],
  ),
),

Answer 19

在 Column 中，我们通过使用灵活的 widget 包裹 column 来制作文本省略号，

 Container(
            height: SizeConfig.blockSizeVertical * 20,
            width: SizeConfig.blockSizeHorizontal * 88,
            child: Flexible(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  PicClipper(
                      height: 50,
                      width: 50,
                      circularRadius: 30,
                      circularImage: imageUrl[index]),
                  SizedBox(
                    width: SizeConfig.blockSizeHorizontal * 3,
                  ),
                  const Text(
                    fontSize: 12,
                    fontWeight: FontWeight.normal,
                    text:
                        'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
                    fontStyle: FontStyle.normal,
                    textColor: AppColors.blackTextColor,
                    overflow: TextOverflow.ellipsis,
                    fontFamily: "Poppins",
                    maxLine: 3,
                    textAlign: TextAlign.start,
                  ),
                ],
              ),
            ),
          ),

Answer 20

在 Row 中，我们首先用 Container 包装 Text，然后用灵活的 widget

包装容器，从而使文本省略号进入第二行

 Container(

            height: SizeConfig.blockSizeVertical * 10,
            width: SizeConfig.blockSizeHorizontal * 88,

            child: Row(
              crossAxisAlignment:
              CrossAxisAlignment.start,
              children: [
                PicClipper(height: 50, width:50, circularRadius: 30, circularImage:imageUrl[index]),
                SizedBox(
                  width:
                  SizeConfig.blockSizeHorizontal * 3,
                ),
                Flexible(
                  child: Container(
                    child: const
                    AppText
                      (
                      fontSize: 12,
                      fontWeight: FontWeight.normal,
                      text:
                      'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
                      fontStyle: FontStyle.normal,
                      textColor: AppColors.blackTextColor,
                      textOverflow: TextOverflow.ellipsis,
                      fontFamily: "Poppins",
                      maxLine: 3,
                      textAlign: TextAlign.start,
                    ),
                  ),
                ),

              ],
            ),
          ),

Answer 21

我使用列中的行多次遇到这样的问题。这是修复它的好方法：

 return Column(
  children: [
    Row(
      children: const [
        Icon(Icons.close, color: Colors.red), // an example icon            
        // use the flexible widget above the padding
        Flexible(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Text(
              "Exemple of text",
              overflow: TextOverflow.ellipsis, // I used ellipsis, but it works with others (fade, clip, etc.)
              maxLines: 1,
            ),
          ),
        ),
      ],
    )
  ],
);

注意我把 Flexible 放在 padding 上面，因为当文本变大时，padding 也会破坏屏幕。只放在Text中是没有用的。希望这有帮助。

Flutter - 在溢出时换行文本，如插入省略号或淡入淡出

Flutter - Wrap text on overflow, like insert ellipsis or fade

dart

text

flutter-layout