我试图创建一行,其中中心文本有一个最大大小,如果文本内容太大,它适合大小。

我插入TextOverflow。属性来缩短文本并插入三个点…但这并不奏效。

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

结果:

预期:


当前回答

行内文本

1. 第1列的文本首选项>第2列

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very  long text in column 1 of Row",
      style: TextStyle(
          overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

2. 第2列的文本首选项>第1列

   Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: const [
        Flexible(
          child: Text(
             "This is very very  long text in column 1 of Row",
             style: TextStyle(overflow: TextOverflow.ellipsis,  backgroundColor: Colors.green),
          ),
        ),
       Text("This is very very  long text in column 2 of Row",
        style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.yellow))
    ],
   )

3.相同的喜好

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(
            overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

列内的文本

定义maxLine属性。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very very very very very very very very very very very very very very very very  long text in Row 1 of Column",
      maxLines: 2,
      style: TextStyle(
          backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
    ),
    Text("This is very very  long text in Row 2 of Column",
        style: TextStyle(
            overflow: TextOverflow.ellipsis,
            backgroundColor: Colors.yellow))
  ],
)

注意:如果你的要求是显示条目内容而不溢出,但不打乱约束,删除溢出属性,但保持Flexible不变:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

其他回答

你应该用一个Flexible来包装你的容器,让你的行知道容器比它的固有宽度窄是可以的。扩展也可以。

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,
      ),
    ),
  ),
),

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

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),
              ),
            ),

使用省略号

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,
),


注意:

如果你在一行中使用文本,你可以像这样把上面的文本放在扩展内:

Expanded(
  child: AboveText(),
)

行内文本

1. 第1列的文本首选项>第2列

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very  long text in column 1 of Row",
      style: TextStyle(
          overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

2. 第2列的文本首选项>第1列

   Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: const [
        Flexible(
          child: Text(
             "This is very very  long text in column 1 of Row",
             style: TextStyle(overflow: TextOverflow.ellipsis,  backgroundColor: Colors.green),
          ),
        ),
       Text("This is very very  long text in column 2 of Row",
        style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.yellow))
    ],
   )

3.相同的喜好

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(
            overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

列内的文本

定义maxLine属性。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very very very very very very very very very very very very very very very very  long text in Row 1 of Column",
      maxLines: 2,
      style: TextStyle(
          backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
    ),
    Text("This is very very  long text in Row 2 of Column",
        style: TextStyle(
            overflow: TextOverflow.ellipsis,
            backgroundColor: Colors.yellow))
  ],
)

注意:如果你的要求是显示条目内容而不溢出,但不打乱约束,删除溢出属性,但保持Flexible不变:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

你可以先将你的列包装在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.")
          ]
        ),
      )
    ],
  ),
),