嵌套在 Flutter 中的 Row 中的文本小部件的 RenderFlex 问题答案

【问题标题】：RenderFlex issue with Text widget nested in Row in Flutter嵌套在 Flutter 中的 Row 中的文本小部件的 RenderFlex 问题
【发布时间】：2020-11-10 11:03:02
【问题描述】：

我在列表视图构建器中使用以下小部件来明智地列出数组索引，这工作正常，但是当文本溢出时，如所附屏幕截图所示，下面的代码实现相同，我应该如何纠正它？

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text(
      //"STEPS ${index + 1}",
      "${index + 1}.  ${widget.steps[index]['step']}",
      style: TextStyle(
        color: Colors.black45,
        fontFamily: 'Montserrat',
        fontSize: 16,
        fontWeight: FontWeight.w400
      ),
    ),
  ],
)

Image,

【问题讨论】：

标签： flutter flutter-text

【解决方案1】：

您可以在下面复制粘贴运行完整代码
您可以使用Expanded 和overflow: TextOverflow.ellipsis
代码sn-p

return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Text(
            //"STEPS ${index + 1}",
            "${index + 1} long string 1" * 10,
            overflow: TextOverflow.ellipsis,

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext ctxt, int index) {
            return Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Text(
                    //"STEPS ${index + 1}",
                    "${index + 1} long string 1" * 10,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.black45,
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        fontWeight: FontWeight.w400),
                  ),
                ),
              ],
            );
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

将 overflow: TextOverflow.ellipsis 添加到您的代码中。

                                 Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                   
                                      Text(
                                        //"STEPS ${index + 1}",
                                        "${index + 1}.  ${widget.steps[index]['step']}",
                                          overflow: TextOverflow.ellipsis,  //Add this line to your code.
                                        style: TextStyle(
                                            color: Colors.black45,
                                            fontFamily: 'Montserrat',
                                            fontSize: 16,
                                            fontWeight: FontWeight.w400),
                                      ),

                                    ],
                                  )

【讨论】：