Dart/Flutter能否在类级别统一设置Widget的UI属性？

下面针对你想要的「类似HTML+CSS的全局统一配置组件属性，避免重复设置」的需求，提供几种不同场景下的实现方案：

1. 原生CSS/预处理器全局样式方案（最贴近HTML+CSS的使用习惯） #

创建一个全局样式文件（比如global-components.css），直接为目标组件类名定义统一样式，然后在项目入口引入即可：

/* global-components.css */
/* 统一配置Column组件 */
.Column {
  width: 25%;
  padding: 1rem;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

/* 统一配置DropDownMenu组件 */
.DropDownMenu {
  min-width: 180px;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: none;
}

.DropDownMenu .menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.DropDownMenu .menu-item:hover {
  background-color: #e8e8e8;
}

在项目入口文件（比如main.js/index.js）中引入这个样式文件：

import './styles/global-components.css';

之后所有带有.Column、.DropDownMenu类名的元素都会自动应用这些样式，无需逐个实例配置。

2. UI组件库的全局主题配置（使用第三方组件库时） #

如果是使用Element UI、Ant Design等成熟组件库，它们大多支持通过全局主题变量/配置文件统一修改组件的颜色、尺寸等属性：

以Element UI为例，创建一个主题变量文件theme-variables.scss：

/* 覆盖Element UI的全局变量，统一配置组件属性 */
$--color-primary: #1890ff;
$--dropdown-menu-background: #ffffff;
$--dropdown-menu-item-hover-bg: #f5f7fa;
$--column-padding: 16px;
$--column-width: 25%;

/* 引入组件库的基础样式 */
@import 'element-ui/packages/theme-chalk/src/index';

然后在入口文件中引入这个SCSS文件，替换组件库的默认样式：

import './styles/theme-variables.scss';

这样所有组件库中的Column、DropDownMenu组件都会自动继承这些全局配置。

3. 自定义组件的全局默认配置（自研组件场景） #

如果是自己开发的组件，可以通过全局配置对象预设默认属性，组件内部优先读取全局配置，需要特殊修改时再通过props覆盖：

首先创建全局配置文件component-config.js：

// 全局组件默认配置
export default {
  Column: {
    width: '25%',
    padding: '1rem',
    bgColor: '#f5f5f5'
  },
  DropDownMenu: {
    minWidth: '180px',
    borderRadius: '4px',
    textColor: '#333'
  }
};

然后在自定义组件中引入并使用这个配置：

<!-- Column.vue -->
<template>
  <div :style="computedStyle">
    <slot></slot>
  </div>
</template>

<script>
import globalConfig from '../config/component-config';

export default {
  props: {
    width: {
      type: String,
      default: () => globalConfig.Column.width
    },
    padding: {
      type: String,
      default: () => globalConfig.Column.padding
    },
    bgColor: {
      type: String,
      default: () => globalConfig.Column.bgColor
    }
  },
  computed: {
    computedStyle() {
      return {
        width: this.width,
        padding: this.padding,
        backgroundColor: this.bgColor,
        boxSizing: 'border-box'
      };
    }
  }
};
</script>

后续使用Column组件时，若不传入props则自动使用全局配置，需要特殊样式时只需传入对应props覆盖即可。

4. CSS-in-JS全局主题方案（使用CSS-in-JS方案时） #

如果项目使用Styled Components、Emotion等CSS-in-JS方案，可以通过全局主题对象统一配置组件样式：

首先创建主题文件theme.js：

export const globalTheme = {
  column: {
    width: '25%',
    padding: '1rem',
    bgColor: '#f5f5f5'
  },
  dropDownMenu: {
    minWidth: '180px',
    borderRadius: '4px',
    color: '#333',
    hoverBg: '#e8e8e8'
  }
};

在应用根组件中提供主题：

import { ThemeProvider } from 'styled-components';
import { globalTheme } from './theme';

function App() {
  return (
    <ThemeProvider theme={globalTheme}>
      {/* 应用所有内容 */}
    </ThemeProvider>
  );
}

然后在组件中使用主题变量：

import styled from 'styled-components';

const Column = styled.div`
  width: ${props => props.theme.column.width};
  padding: ${props => props.theme.column.padding};
  background-color: ${props => props.theme.column.bgColor};
  box-sizing: border-box;
`;

const DropDownMenu = styled.div`
  min-width: ${props => props.theme.dropDownMenu.minWidth};
  border-radius: ${props => props.theme.dropDownMenu.borderRadius};
  color: ${props => props.theme.dropDownMenu.color};
  
  .menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: ${props => props.theme.dropDownMenu.hoverBg};
    }
  }
`;

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