.NET MAUI仿书籍阅读器分页适配问题求助

一、放弃字符计数，改用实际渲染测量分页 #

字符计数法完全忽略HTML元素（换行、段落、间距）的排版影响，这是导致内容溢出的核心原因。建议用隐藏测量控件计算实际内容高度，再匹配页面可用区域：

// 计算页面可用高度（扣除导航栏等固定元素）
var screenDensity = DeviceDisplay.MainDisplayInfo.Density;
var pageAvailableHeight = (DeviceDisplay.MainDisplayInfo.Height / screenDensity) 
                          - TopNavigationBar.Height 
                          - BottomToolbar.Height;

// 创建隐藏的Label，与实际页面使用相同的字体、宽度、边距
var measureLabel = new Label
{
    WidthRequest = DeviceDisplay.MainDisplayInfo.Width / screenDensity,
    FontSize = CurrentFontSize,
    Margin = new Thickness(16),
    IsVisible = false,
    LineBreakMode = LineBreakMode.WordWrap
};
Content.Add(measureLabel);

List<string> paginatedContent = new List<string>();
StringBuilder currentPage = new StringBuilder();

// 假设parsedBlocks是解析后的HTML语义块（按<p>/<br>拆分的段落/换行）
foreach (var block in parsedBlocks)
{
    currentPage.Append(block + "\n");
    measureLabel.Text = currentPage.ToString();
    measureLabel.ForceLayout(); // 强制触发布局测量

    if (measureLabel.HeightRequest > pageAvailableHeight)
    {
        // 移除导致溢出的最后一个块，存入当前页
        currentPage.Remove(currentPage.Length - block.Length - 1, block.Length + 1);
        paginatedContent.Add(currentPage.ToString());
        currentPage.Clear();
        currentPage.Append(block + "\n");
    }
}

// 添加剩余内容为最后一页
if (currentPage.Length > 0)
{
    paginatedContent.Add(currentPage.ToString());
}

Content.Remove(measureLabel);
ChapterPages = new ObservableCollection<string>(paginatedContent);

二、正确处理HTML换行元素 #

解析HTML时，不要将<br>/<p>直接转成空格，要保留排版语义：

• 把<p>标签内容拆分为独立段落，末尾加\n\n
• 把<br>转成单个\n
• 如果用WebView渲染，添加基础CSS控制换行与间距：

  <style>
      body { margin: 16px; font-size: {{CurrentFontSize}}px; line-height: 1.6; }
      p { margin-bottom: 14px; }
      br { display: block; margin: 8px 0; }
  </style>
  

三、禁用ScrollView，改用分页容器 #

仿书籍阅读器不需要滚动，直接用CarouselView实现分页切换，每个页面是独立的无滚动容器：

<CarouselView ItemsSource="{Binding ChapterPages}"
              IsScrollAnimated="True">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <ContentView Padding="16" VerticalOptions="Fill">
                <!-- Label渲染方案 -->
                <Label Text="{Binding}" 
                       FontSize="{Binding CurrentFontSize}"
                       LineBreakMode="WordWrap"
                       VerticalOptions="Start" />
                
                <!-- WebView渲染方案（适合复杂HTML） -->
                <!-- <WebView Source="{Binding ., Converter={StaticResource HtmlToSourceConverter}}"
                         VerticalOptions="Fill"
                         HorizontalOptions="Fill" /> -->
            </ContentView>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

四、字体大小调整联动重新分页 #

字体变化会直接改变内容高度，需在字体属性变更时触发重新计算：

private double _currentFontSize = 16;
public double CurrentFontSize
{
    get => _currentFontSize;
    set
    {
        if (_currentFontSize != value)
        {
            _currentFontSize = value;
            OnPropertyChanged();
            RecalculatePages(); // 调用前面的分页逻辑
        }
    }
}

五、优化内容存储结构 #

不要按字符拆分存储章节，改用语义块集合（比如段落、标题、换行），分页时优先保持语义块完整，避免拆分到单词或段落中间：

public enum BlockType { Paragraph, LineBreak, Heading }
public class ContentBlock
{
    public BlockType Type { get; set; }
    public string Content { get; set; }
}

// 解析HTML后生成语义块集合
ObservableCollection<ContentBlock> ChapterBlocks = new ObservableCollection<ContentBlock>();

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