Как правильно выровнять для первого компонента

Я пытаюсь реализовать следующий макет:

     Name: James
Gender: Male
Followers: Brian, Jason and Mike.

Я могу себе представить, что верхним уровнем является использование CKStackLayout, но для каждой записи, например, «Имя: Джеймс», как я могу сделать так, чтобы Имя правильно выровнялось внутри Коробки?

Я использовал что-то вроде следующего, обернуть текст в компонент фиксированной ширины и установить компонент метки для использования NSTextAlignmentRight выравнивание, но оно не работает, и левый, и правый просто выровнены по левому краю:

static CKComponent *singleLine(NSString *left, NSString *right)
{
CKStackLayoutComponent *stackComponent =
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal,
.alignItems = CKStackLayoutAlignItemsStretch,}
children:{
{.component = [CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(10)}]},
{.component =
[CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(88)}
children:{
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = left,
.alignment = NSTextAlignmentRight,
.font = [UIFont boldSystemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
}
}],
},
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = right,
.alignment = NSTextAlignmentLeft,
.font = [UIFont systemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
.spacingBefore = 10.0
}
}];

return stackComponent;
}

Спасибо!

0

Решение

Я думаю, что ваше решение хорошее. Альтернативным решением было бы написать свой собственный макет, переопределив computeLayoutThatFits:, Как правило, лучше избегать этого, но для сложных макетов, таких как формы, это может быть спасением.

1

Другие решения

Может быть, вы должны дать внешнее расположение стека (которое переносит одну строку мультилинии и имеет вертикальное направление макета): .alignItems = CKStackLayoutAlignItemsStretch

0

По вопросам рекламы [email protected]