Flutter实现最大2列、高度随内容动态变化的笔记App网格视图

核心思路 #

要实现最多2列、容器高度随内容动态变化的笔记布局，核心是让每个笔记子项能根据内容长度自动调整高度，同时保证网格布局的列数控制逻辑适配这种动态高度。

具体实现步骤 #

1. 布局容器选型（Android端） #

放弃默认GridView（不支持动态高度子项），改用RecyclerView配合GridLayoutManager：

• 初始化GridLayoutManager时设置列数为2，通过SpanSizeLookup确保始终最多2列；
• 将RecyclerView的高度设为wrap_content，让容器整体适配子项高度。

2. 子项动态高度控制 #

在笔记子项的布局绑定逻辑中，根据内容长度调整高度：

// Kotlin示例：绑定笔记数据时调整高度
val noteContent = note.content
val noteItem = itemView.note_container
val layoutParams = noteItem.layoutParams
layoutParams.height = if (noteContent.length < 50) {
    // 短内容时用固定短高度或wrap_content
    resources.getDimensionPixelSize(R.dimen.note_short_height)
} else {
    // 长内容时让内容撑满高度
    ViewGroup.LayoutParams.WRAP_CONTENT
}
noteItem.layoutParams = layoutParams

也可以通过TextView的属性简化控制：短内容时设置maxLines=2，长内容时设置maxLines=6，让文本自动撑开容器高度。

3. iOS端实现思路 #

使用UICollectionView配合自定义UICollectionViewFlowLayout，在代理方法中计算子项尺寸：

// Swift示例：计算每个笔记项的尺寸
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let note = notes[indexPath.item]
    let columnWidth = (UIScreen.main.bounds.width - 32) / 2 // 减去左右边距和列间距
    var itemHeight: CGFloat = 80 // 短内容默认高度
    
    if note.content.count >= 50 {
        // 根据文本内容计算实际高度
        let textRect = note.content.boundingRect(
            with: CGSize(width: columnWidth - 16, height: CGFloat.greatestFiniteMagnitude),
            options: .usesLineFragmentOrigin,
            attributes: [.font: UIFont.systemFont(ofSize: 15)],
            context: nil
        )
        itemHeight = textRect.height + 24 // 加上上下内边距
    }
    return CGSize(width: columnWidth, height: itemHeight)
}

注意事项 #

• 统一设置子项的内边距和间距，避免布局错乱；
• 开启视图复用机制（RecyclerView/UICollectionView默认支持），避免动态高度导致的性能问题；
• 测试极端场景（空内容、超长内容），确保布局显示正常。

内容的提问来源于stack exchange，提问作者0xLasadie