@cross-device-app-dev/grid-columns-span
不推荐开发者将栅格中所有的GridCol子组件只设置span属性,且值与父组件的columns属性相等。这等效于子组件宽度始终为父容器的100%,栅格系统没有发挥作用,徒增页面组件树复杂度,影响性能。
规则配置
// code-linter.json5
{
"rules": {
"@cross-device-app-dev/grid-columns-span": "warn"
}
}
选项
该规则无需配置额外选项。
正例
@Entry
@Component
struct Index {
build() {
Column() {
GridRow({
columns: { sm: 4, md: 8, lg: 12 }
}) {
GridCol({
span: { sm: 4, md: 4, lg: 4 }, offset: { sm: 0, md: 2, lg: 4 }
}) {
Row().backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
}
}
}
}
}
反例
@Entry
@Component
struct Index {
build() {
Column() {
GridRow({
columns: { sm: 4, md: 8, lg: 12 }
}) {
GridCol({
span: { sm: 4, md: 8, lg: 12 }
}) {
Row().backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
}
}
}
}
}
规则集
plugin:@cross-device-app-dev/recommended
plugin:@cross-device-app-dev/all
Code Linter代码检查规则的配置指导请参考Code Linter代码检查。