Flutter 中嵌套在行中的文本小部件的 RenderFlex 问题

Question

我在列表视图生成器中使用下面的小部件来明智地列出数组索引，它工作正常，但是当文字溢出时如所附截图所示，下面的代码也是如此实现的，我应该如何纠正？

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,

Answer 1

将 溢出：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),
                                      ),

                                    ],
                                  )

Answer 2

您可以复制粘贴运行下面的完整代码
您可以使用 Expanded 和 overflow: TextOverflow.ellipsis
代码片段

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

Flutter 中嵌套在行中的文本小部件的 RenderFlex 问题

RenderFlex issue with Text widget nested in Row in Flutter

flutter

flutter-text