동적 글꼴 크기로 너비 레이블 고정

Question

주어진 텍스트 및 고정 너비의 글꼴 크기를 가져 오는 방법이 있습니까?

내가 함께 노력했다 :

TextField{ 
    autoFit: TextAutoFit.FitToBounds 
} 

그러나 텍스트는 항상 정렬을 왼쪽으로 나타납니다. 이 요구 사항은 고정 rect에서 가변 글꼴 크기 레이블 렌더링과 텍스트 정렬을 가운데 정렬하는 것입니다.

Answer 1

방금 ​​정렬 텍스트를 중심하려는 경우, 당신은 그렇게 textStyle.textAlign 속성을 사용해야 할 것 :

textStyle.textAlign: TextAlign.Center 

을 고정하는 구형에 렌더링 가변 글꼴 크기 레이블 텍스트를 정렬 중심을하기 위해, 당신은 기본적으로 필요 위의 LabeltextStyle.textAlign 속성을 사용하여 해당 사각형의 원하는 너비와 높이를 지정하고 각각 textStyle.fontSizeLabel 속성을 통해 글꼴 크기를 선택하십시오. 텍스트 정렬은 (텍스트가 지정된 너비/높이에 적합하지 않을 수 있다면 물론, 그것은 끊어 질 것) 자동 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" 
     } 
    }