颤动旋转的文本未填充可用空间

Posted 2023-02-23

【中文标题】颤动旋转的文本未填充可用空间

【英文标题】：Flutter rotated text not filling available space

【发布时间】：2020-02-11 22:47:21

【问题描述】：

我有一个包含一些文本的容器，当文本处于正常水平位置时，它被分成 2 行，因为它不适合单行，我理解：

Container(
                    width: 30,
                    height: 250,
                    color: Color.fromRGBO(254, 242, 0, 1),
                    child: Center(
                      child: Text(
                        "dB per H",
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),

这将呈现为：

现在我正在旋转文本，使其在垂直方向呈现，容器有足够的空间。然而，它仍然被分成 2 行，而预期是现在它可以正常安装了。

如何解决这个问题？

Container(
                    width: 30,
                    height: 250,
                    color: Color.fromRGBO(254, 242, 0, 1),
                    child: Center(
                      child: Transform.rotate(
                        angle: -pi / 2,
                        child: Text(
                          "dB per H",
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),

这将呈现为：

【问题讨论】：

尝试将属性添加到Text maxLines: 1

我认为你需要找到另一种选择，当你旋转文本时，文本的最大宽度跟随容器宽度

@aswindarma 好的，还有什么其他选择？？

【参考方案1】：

试试这个

Column(
    children: <Widget>[
      Container(
        height: 250,
        child: Row(
          children: <Widget>[
            Transform.rotate(
              angle: -pi / 2,
              child: Container(
                width: 250,
                color: Color.fromRGBO(254, 242, 0, 1),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "dB per H",
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),

【参考方案2】：

你可以使用height: double.infinity;

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: Container(
          width: 30,
          height: double.infinity,
          color: Color.fromRGBO(254, 242, 0, 1),
          child: Center(
            child: RotatedBox(
              quarterTurns: 3,
              child: Text(
                "dB per H",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ),
      ),
    );

【参考方案3】：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: Container(
          width: 30,
          height: 250,
          color: Color.fromRGBO(254, 242, 0, 1),
          child: Center(
            child: RotatedBox(
              quarterTurns: 3,
              child: Text(
                "dB per H",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  

【讨论】：

即使我没有测试所有其他提议的解决方案，即使您没有添加任何进一步的解释，您的解决方案也可以进行最少的更改，因此我接受您的回答。谢谢

【参考方案4】：

试试这个

new RotationTransition(
  turns: new AlwaysStoppedAnimation(90 / 360),
  child: Container(
    width: 250,
    height: 60,
    color: Color.fromRGBO(254, 242, 0, 1),
    child: new Center(
      child: new Text("Lorem ipsum"),
    ),
  ),
),

【参考方案5】：

因此，首先渲染子对象（确定高度和宽度），然后Transform 小部件基于此应用转换。在这种情况下，将其旋转pi/2。 然而，由于孩子的高度和宽度在此之前是固定的，因此旋转不会改变这一点。您可以尝试将文本放置在 flex 小部件或具有固定高度的容器中以查看所需的输出。这是容器方法的示例：

Container(
              width: 30,
              height: 250,
              color: Color.fromRGBO(254, 242, 0, 1),
              child: Center(
                child: Transform.rotate(
                  angle: -pi / 2,
                  child: Container(
                    height: 50,
                    child: Text(
                      "dB per H",
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
              ),
            ),