Question

在级联中是否有一种方法可以获得给定文本和固定宽度的字体大小？

我正在尝试：

TextField{
  autoFit: TextAutoFit.FitToBounds
}

但是文字总是显示为左对齐。要求是将文本与固定矩形中的可变字体大小标签渲染居中对齐。

Answer 1

如果您只想居中对齐文字，则需要使用textStyle.textAlign这样的属性：

textStyle.textAlign: TextAlign.Center

为了使文本与固定矩形中的可变字体大小标签渲染居中对齐，您基本上需要为上面提到的Label使用textStyle.textAlign属性指定该矩形的所需宽度和高度，然后选择通过各自textStyle.fontSize Label属性的字体大小。文本对齐将由Cascades自动完成（当然，如果您的文字无法适应指定的宽度/高度，则会被切断）：

import bb.cascades 1.0

Page {
    Container {
        layout: DockLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Label {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            maxWidth: 300
            minWidth: maxWidth
            maxHeight: 100
            minHeight: maxHeight
            multiline: true
            text: "Some very very very very very long text here"
            textStyle.textAlign: TextAlign.Center
            textStyle.fontSize: FontSize.XLarge
        }
    }
}

我建议使用这种方法来实现目标集。

但是，如果您真的想要获取窗口小部件中使用的字体的绝对值，请使用textStyle.fontSize属性（TextStyle官方文档）。

Answer 2

目前BB10 Cascades中没有字体指标，因此您无法确定字体是否适合标签并调整其大小。

你可以使用layoutUpdateHandler进行一些破解来获得一些粗略的大小调整，但我不推荐它。如果文本经常更改，您将看到闪烁，但如果它只设置一次，那么它可能没问题。更改“onCreationCompleted”中设置的文本，以查看文本是否为您调整大小。

    Container {
        id: root
        implicitLayoutAnimationsEnabled: false 

        background: Color.Cyan
        property int width: 500
        property string  text: ""
        property double textSize: 20
        layout: DockLayout {
        }
        attachedObjects: [
            LayoutUpdateHandler {
                onLayoutFrameChanged: {
                    if (layoutFrame.width > root.width) {
                        root.textSize = root.textSize - 1
                    }
                }
            }
        ]
        Label {
            implicitLayoutAnimationsEnabled: false 
            maxWidth: root.width
            text: root.text
            textStyle {
                fontSize: FontSize.PointValue
                fontSizeValue: root.textSize
            }
        }
        Label {
            implicitLayoutAnimationsEnabled: false 
            text: root.text
            opacity: 0
            textStyle {
                fontSize: FontSize.PointValue
                fontSizeValue: root.textSize
            }

        }
        onCreationCompleted: {
            root.text = "Hello World AAAAAAAA"
        }
    }

使用动态字体大小修复宽度标签

2 个答案: