You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI中如何创建带网格线的展示表格?

MAUI带网格线表格实现方案问题

我需要实现一个类似Excel的带网格线表格,仅用于展示无需编辑。尝试过以下三种方法,但都存在问题:

  • 使用GridLayout,但找不到开启网格线的设置项;
  • 给GridLayout的每个单元格添加Border,虽然把RowSpacing和ColumnSpacing设为0,但Android平台上边框之间有间隙,Windows平台上线条宽度是预期的两倍,iOS还未测试;
  • 将Grid背景色设为黑色、内部Label背景色设为白色,通过行间距和列间距模拟网格线,但问题是Grid的背景色会填满分配的所有空间,当数据没填满可用空间时,空白区域会显示黑色,用Border或ContentView包裹也无法解决。

补充需求

  • 需通过编程方式创建表格;
  • 支持行点击响应;
  • 数据支持滚动(比如在GridLayout外嵌套ScrollView);
  • 表格位于AbsoluteLayout中,位置和尺寸由应用外部确定。

等效XAML代码

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModel="clr-namespace:something"
             xmlns:resx="clr-namespace:something else"
             x:Class="Maui.Pages.Views"
             x:DataType="viewModel:ViewsViewModel"
             Title="Test">
  <AbsoluteLayout x:Name="ViewLayout"
                  Grid.Column="0"
                  Grid.Row="1"
                  IsVisible="{Binding HasViews}">
    <ScrollView AbsoluteLayout.LayoutBounds="0,0,0.5,1"
                AbsoluteLayout.LayoutFlags="All">
      <ContentView>
        <Grid RowDefinitions="Auto, Auto, Auto"
              ColumnDefinitions="Auto, Auto, Auto"
              BackgroundColor="Black"
              RowSpacing="1"
              ColumnSpacing="1">
          <Label Grid.Row="0"
                 Grid.Column="0"
                 Text="sample text 1"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="0"
                 Text="sample text 2"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="0"
                 Text="sample text 3"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="0"
                 Grid.Column="1"
                 Text="sample text 4"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="1"
                 Text="sample text 5"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="1"
                 Text="sample text 6"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="0"
                 Grid.Column="2"
                 Text="sample text 7"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="2"
                 Text="sample text 8"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="2"
                 Text="sample text 9"
                 Padding="4"
                 BackgroundColor="White" />
        </Grid>
      </ContentView>
    </ScrollView>
  </AbsoluteLayout>
</ContentPage>

现有效果

用背景色模拟网格线的表格效果


内容的提问来源于stack exchange,提问作者Naryoril

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 14:14:52