如何为GridLayout布局的各列元素之间添加间距

方案1：使用内置列间距属性（推荐） #

直接在GridLayout标签上添加columnSpacing属性指定间距大小即可，会自动在所有列之间生成均匀间距，不会在布局左右外侧生成多余边距：

<StackLayout class="m-t-10">
    <Label text="Attached media" textWrap="true" class="p-10 h2 title-2"></Label>
    <!-- 新增columnSpacing属性，数值按你需要的间距大小调整即可 -->
    <GridLayout rows="*, *, *" columns="*, *, *" columnSpacing="10">
        <Image col="0" row="0" src="res://img1" stretch="aspectFill" class="task-media"></Image>
        <Image col="1" row="0" src="res://img1" stretch="aspectFill" class="task-media"></Image>
        <Image col="2" row="0" src="res://img1" stretch="aspectFill" class="task-media"></Image>
    </GridLayout>
</StackLayout>

方案2：为Image元素设置边距 #

如果需要自定义不同位置的间距，可在task-media样式类中添加左右边距规则：

.task-media {
  /* 保留原有样式，新增左右边距，数值可按需调整 */
  margin: 0 8;
}
/* 可选：去掉第一列左侧、最后一列右侧的多余边距 */
.task-media[col="0"] {
  margin-left: 0;
}
.task-media[col="2"] {
  margin-right: 0;
}

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