如何右对齐第一个组件答案

【问题标题】：How to right align for the first component如何右对齐第一个组件
【发布时间】：2015-11-24 04:01:10
【问题描述】：

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

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

我可以想象顶层是使用 CKStackLayout，但是对于每个条目，例如“姓名：James”，如何使名称在方框内右对齐？

我使用了类似下面的东西，将文本包装在一个固定宽度的组件中，并将标签组件设置为使用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;
}

谢谢！

【问题讨论】：

我最终在CKStaticLayoutComponent 中使用了“.size = CKRelativeSizeRange(CKRelativeSize(CKRelativeDimension(88), 0), {})”。基本上为CKLabelComponent 添加一个最小宽度，然后文本在该范围内右对齐。

标签： c++ ios objective-c componentkit

【解决方案1】：

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

【讨论】：

感谢亚当！这很有帮助

【解决方案2】：

可能你应该给外部stacklout（它包裹多行单行，并具有垂直布局方向）：.alignItems = CKStackLayoutAlignItemsStretch

【讨论】：