顫振 - 在文本中插入溢出省略號

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中，以便讓您的知道Container的寬度比其內在寬度窄。 Expanded也將工作。

  new 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

我覺得父容器需要給予適當大小的maxWidth。它看起來像文本框將填充上面給出的任何空間。