Flutter-溢出时自动换行，例如插入省略号或淡入淡出 [英] Flutter - Wrap text on overflow, like insert ellipsis or fade

问题描述

我正在尝试创建一行，该行的中心文本具有最大尺寸，并且如果文本内容太大，则可以容纳其大小。

I插入 TextOverflow.ellipsis 属性以缩短文本并插入三点 ... ，但是它不起作用。

main.dart

 导入'package：flutter / material.dart'; 
 
 void main（）{
 runApp（new MyApp（））; 
} 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 home：new HomePage（），
）; 
} 
} 
 
类HomePage扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）=>新的Scaffold（
 appBar：新的AppBar（
 backgroundColor：新的Color（0xFF26C6DA），
），
的主体：new ListView（
的孩子：< Widget> [ 
新卡（
子代：新的容器（
填充：新EdgeInsets.symmetric（水平：16.0，垂直：18.0）），
子代：新的行（
子代：< Widget> [
 new Container（
 padding：new EdgeInsets.only（right：24.0），
 child：new CircleAvatar（
 backgroundColor：new Color（0xFFF5F5F5）， 
半径：16.0，
）
），
新Container（
 padding：new EdgeInsets.only（right：13.0），
 child：new Text （
'Text lar ...'，
溢出：TextOverflow.ellipsis，
样式：new TextStyle（
 fontSize：13.0，
 fontFamily：'Roboto'，
 color：new Color（0xFF212121），
 fontWeight：FontWeight.bold，
），
），
），
新容器（
子项：new Column（
 crossAxisAlignment：CrossAxisAlignment.end，
子项：< Widget> [
新行（
儿童：< Widget> [
 new Text（
'Bill'，
 style：new TextStyle（
 fontSize：12.0，
 fontFamily：'Roboto' ，
颜色：new Color（0xFF9E9E9E）
），
），
 new Text（
 '\ $ -999.999.999,95'，
样式：new TextStyle（
字体大小：14.0，
字体家族：'Roboto'，
颜色：新颜色（0xFF212121） 
），
），
]，
），
 new Row（
 children：< Widget> [
 new Text（
'Limit'，
样式：new TextStyle（
 fontSize：12.0，
 fontFamily：'Roboto'，
 color：new Color（0xFF9E9E9E）
） ，
），
新文字（
'R\ $ 900.000.000,95'，
样式：new TextStyle（
 fontSize：14.0，
 fontFamily：'Roboto'，
 color：new Color（0xFF9E9E9E）
），
），
 ]，
），
] 
）
）
]，
），
）
），
 ] 
）
）; 
} 
  

结果：

预期：

解决方案

您应该包装容器在

  Flexible（
 child：new Container（
 padding：new EdgeInsets.only（right：13.0），
 child：new Text（
'text largeeeeeeeeeeeeeeeeeeeeeeeeeee'，
溢出） ：TextOverflow.ellipsis，
样式：new TextStyle（
字体大小：13.0，
 fontFamily：'Roboto'，
颜色：new Color（0xFF212121），
 fontWeight： FontWeight.bold，
），
），
），
），
  

I'm trying to create a line in which center text has a maximum size, and if the text content is too large, it fits in size.

I insert the TextOverflow.ellipsis property to shorten the text and inserting the triple points ... but it is not working.

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

result:

expected:

解决方案

You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

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

这篇关于Flutter-溢出时自动换行，例如插入省略号或淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！