Question

我的文字有时对于屏幕来说可能太长了，而对于布局而言则太长了。

这里有代码：

Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              'Modesto Vasco Fornasvv v',
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(

                                  fontFamily: "Montserrat Medium",
                                  color: Colors.white,
                                  fontSize: 20),
                            ),

，还有屏幕截图：

我想解决这个问题，并且我加入了以下行：

overflow: TextOverflow.ellipsis,

但是显然不足以解决它。

我应该更改或删除什么以使显示的文字尽可能长？

Answer 1

包装在扩展小部件中

Expanded(child:Text('Modesto Vasco Fornasvv v',
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
      fontFamily: "Montserrat Medium",
      color: Colors.white,
      fontSize: 20),
   ),
)

Answer 2

试用 this 插件，如果无法正常使用，请用 Expanded widget 包裹 strong>

AutoSizeText(
  'The text to display',
  style: TextStyle(fontSize: 20),
  maxLines: 1,
)

Answer 3

我从UI假设您在Column小部件内有Row小部件。您需要将列小部件包装在Expanded小部件中，以便它计算出它必须在屏幕的剩余宽度内适合列的内容。

您的列窗口小部件应如下所示：

Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Modesto Vasco Fornasvv v',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontFamily: "Montserrat Medium",
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ],
          ),
        );

这是演示示例的代码段：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        /// Added as placeholder for display image
        Container(
          width: 72,
          height: 72,
          color: Colors.black,
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Modesto Vasco Fornasvv v sadwqdsad asdas dasd asd asdas das das dasdas dasdas dasd',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontFamily: "Montserrat Medium",
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

长文本引发异常

3 个答案: