GridLayout의 Nativescript 세로 정렬이 작동하지 않습니다.

Nativescript에서 GridLayout에있는 StackLayout에 문제가 있습니다. StackLayout 중심에서 Label을 정렬 할 수 없습니다. 나는 수직 느낌표 아이콘 센터를 원하는, 여기에GridLayout의 Nativescript 세로 정렬이 작동하지 않습니다.

볼 수 있습니다 : 여기

내가 실현하려 싶은 것이 사진입니다.

그러나 불행히도 나는이가 계속 : 여기

내가 사용하는 코드입니다 :

tns.html

<GridLayout class="formMessage warning" columns="auto,*" rows="auto"> 
    <StackLayout col="0" class="formMessageIcon"> 
    <Label class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label> 
    </StackLayout> 
    <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label> 
</GridLayout>

CSS

.formMessage { 
    width: 100%; 
    border-width: 2; 
    border-color: #ff344e; 
} 

.formMessageIcon { 
    background-color: #ff344e; 
    width: 30; 
} 

.icon { 
    vertical-align: center; 
    text-align: center; 
    margin-right: 2; 
    font-size: 18; 
    color: #2b3535; 
} 

.formMessageText { 
    padding: 5 8; 
    color: #ff344e; 
}

아이콘 센터링을 어떻게 수정합니까? 내가 뭘 잘못하고 있니? 고마워요! 여기

출처

2016-10-12 ans777

StackLayout에 verticalAlignment = "center"를 추가하고 auto, * 대신에 colums = "*, *"를 모두 사용해 볼 수 있습니까? –

'StackLayout' 내에서 Label의'height'를 지정하려고 시도했습니다 –

StackLayout에 verticalAlignment = "center"를 추가하면 왼쪽 부분이 빨간색으로 채워지지 않고 가운데로 스윕됩니다. 아이콘. 따라서 아이콘 만이 아니라 중심에 위치하게됩니다. 아이콘의 높이를 추가하려고합니다. 감사합니다. 우리는 그것을 보게 될 것입니다. (StackLayout에 지정된 높이를 추가하는 것 외에 문제가 없어지지만 lorem ipsum 레이블에 따라 동적이어야합니다.) 최소 높이가 도움이되지 않습니다. :() – ans777

은 .. 나는 그것이 작동하도록 변경 얼마나

<GridLayout class="formMessage warning" columns="auto,*" rows="auto"> 
    <Label col="0" class="iconbkg" text=""></Label> 
    <Label col="0" class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label> 
    <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label> 
</GridLayout>

입니다 그리고 CSS는 다음과 같습니다

는

.formMessage { 
    width: 100%; 
    border-width: 2; 
    border-color: #ff344e; 
} 

.iconbkg { 
    width: 30; 
    background-color: red; 
    margin-right: 2; 
} 

.icon { 
    width: 30; 
    vertical-align: center; 
    text-align: center; 
    margin-right: 2; 
    font-size: 18; 
    color: #2b3535; 
} 

.formMessageText { 
    padding: 5 8; 
    color: #ff344e; 
}

이 레이아웃의 장점은 실제로입니다 StackLayout을 사용하는 것보다 리소스를 덜 사용합니다. 처리를 간소화합니다.

트릭은 (.iconbkg 클래스를 사용하여) 텍스트를 인쇄하지 않는 배경에 보통 Label을 사용하는 것입니다. 그런 다음 당신을 중심에 두십시오! 다른 하나는 Label이고 둘 다 데이터 격자의 열 0에 있습니다.

출처

2016-10-13 06:17:34 Nathanael

대단히 감사합니다.이 문제를 해결하는 것은 매우 영리한 방법입니다. 완벽하게 작동합니다. – ans777

영리한 감사합니다 @ Nathanael! –

GridLayout의 Nativescript 세로 정렬이 작동하지 않습니다.

답변

관련 문제