如何正确对齐第一个组件

时间:2015-08-29 17:30:50

标签: c++ ios objective-c componentkit

我正在尝试实现以下布局:

     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;
}

谢谢!

2 个答案:

答案 0 :(得分:1)

我认为您的解决方案很好。另一种解决方案是通过覆盖computeLayoutThatFits:来编写自己的自定义布局。一般来说,最好避免这种情况,但对于像表格这样的复杂布局,它可以成为救星。

答案 1 :(得分:0)

可能你应该给外层stacklout(包装multil单行,并且有垂直布局方向):. alignItems = CKStackLayoutAlignItemsStretch