我目前正在尝试使用 ComponentKit，但遇到了问题。我想使用我在主视图上创建的 CKCollectionView。当我在 MainView（包含 ScrollView）中将 CKCollectionView 放入其容器时，我遇到了 2 个问题。第一个，如果我手动创建 CollectionView 的框架，这里是它给我的。（蓝色方块是“UICollectionViewControllerWrapperView”）
但是，我真正想做的是使用 Masonry 和约束设置框架，允许我将框架设置为等于它的容器（黄色方块）。但是当我这样做时，它会用空单元格填充整个蓝色矩形高度，如下图所示：
所以看起来我的实际单元格（或组件）的大小为 647 并且它们正在引起问题。但此时我迷路了，想知道之前是否有人遇到过类似的问题:)。
这是我的代码：
创建单元格的实际组件：
@implementation SSOUpcomingAuctionComponent
+ (instancetype)newWithProduct:(Product *)product {
SSOProductHeaderComponent *head = [SSOProductHeaderComponent newWithTitle:product.time];
SSOProductPictureComponent *body = [SSOProductPictureComponent newWithImage:product.image];
SSOProductShareComponent *footer = [SSOProductShareComponent newWithPrice:product.price];
return [super newWithComponent:[CKInsetComponent newWithInsets:UIEdgeInsetsMake(0, 0, 0, 0)
component:[CKStackLayoutComponent newWithView:{
[UIView class], {
{ @selector(setBackgroundColor:), [UIColor whiteColor] }
, { CKComponentViewAttribute::LayerAttribute(@selector(setCornerRadius:)), @6.0 }
, { @selector(setClipsToBounds:), @YES }
}
} size:{}
style:{
.alignItems = CKStackLayoutAlignItemsCenter, .direction = CKStackLayoutDirectionVertical,
.spacing = 2
} children:{{
head,
},
{body},
{footer}}]]];
}
#pragma mark - ProviderMethod
@end
集合视图控制器：
#import "UpcomingAuctionViewController.h"
#import "SSOUpcomingAuctionComponent.h"
#import <ComponentKit/ComponentKit.h>
#import "Product.h"
#import "ProductPages.h"
#import "ProductModelController.h"
#import <ChameleonFramework/Chameleon.h>
#import "Masonry.h"
@interface UpcomingAuctionViewController () <CKComponentProvider, UICollectionViewDelegateFlowLayout>
@end
@implementation UpcomingAuctionViewController {
CKCollectionViewDataSource *_dataSource;
CKComponentFlexibleSizeRangeProvider *_sizeRangeProvider;
ProductModelController *_productModelController;
}
- (instancetype)initWithCollectionViewLayout:(UICollectionViewLayout *)layout {
if (self = [super initWithCollectionViewLayout:layout]) {
_sizeRangeProvider = [CKComponentFlexibleSizeRangeProvider providerWithFlexibility:CKComponentSizeRangeFlexibleWidth];
_productModelController = [[ProductModelController alloc] init];
self.automaticallyAdjustsScrollViewInsets = NO;
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.collectionView.backgroundColor = [UIColor flatWhiteColorDark];
// [self.collectionView setFrame:CGRectMake(0, 0, 320, 180)];
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
[self.collectionView setScrollEnabled:YES];
self.collectionView.delegate = self;
// Creates and sets our dataSource to our CKCollectionViewDataSource, THE MAIN ACTOR/INFRASTRUCTURE that takes our MODEL, creates a COMPONENT STACKS then
// transforms it into a VIEW HIERARCHY.
_dataSource = [[CKCollectionViewDataSource alloc] initWithCollectionView:self.collectionView
supplementaryViewDataSource:nil
componentProvider:[self class]
context:nil
cellConfigurationFunction:nil];
// The following block of code adds a section at 0 and two items at 0 and 1.
CKArrayControllerSections sections;
// insert section 0
sections.insert(0);
[_dataSource enqueueChangeset:{
sections, {}
} constrainedSize:{}];
[self enqueueProductPages:[_productModelController fetchNewUpcomingProductsWithCount:14]];
}
- (void)enqueueProductPages:(ProductPages *)productPage {
NSArray *products = productPage.products;
NSInteger position = productPage.position;
CKArrayControllerInputItems items;
for (NSInteger i = 0; i < products.count; i++) {
items.insert([NSIndexPath indexPathForRow:position + i inSection:0], products[i]);
}
[_dataSource enqueueChangeset:{
{}
, items
} constrainedSize:[_sizeRangeProvider sizeRangeForBoundingSize:self.collectionView.bounds.size]];
}
#pragma mark - CKComponentProvider
// Method that our componentProvider class NEED to implement
+ (CKComponent *)componentForModel:(Product *)product context:(Product *)context {
return [SSOUpcomingAuctionComponent newWithProduct:product];
}
#pragma mark - UICollectionViewDelegateFlowlayout
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return [_dataSource sizeForItemAtIndexPath:indexPath];
}
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {
[_dataSource announceWillAppearForItemInCell:cell];
}
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {
[_dataSource announceDidDisappearForItemInCell:cell];
}
最后是 mainViewController：
/**
* Initialize upcoming auctions container controller
*/
- (void)initializeUpcomingAuctionsContainerView {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
[flowLayout setMinimumInteritemSpacing:0];
[flowLayout setMinimumLineSpacing:10];
flowLayout.sectionInset = UIEdgeInsetsMake(0, 15, 0, 0);
self.upcomingAuctionsVC = [[UpcomingAuctionViewController alloc] initWithCollectionViewLayout:flowLayout];
[self addChildViewController:self.upcomingAuctionsVC];
[self.bottomView addSubview:self.upcomingAuctionsVC.view];
[self.upcomingAuctionsVC didMoveToParentViewController:self];
}
@end
感谢大家的帮助，祝您度过愉快的一天。