是否可在主题中一次性设置全屏幕通用的padding？

以下是不同开发场景下的常用实现方式，均支持仅修改一处配置全局生效：

前端Web（原生JS/React/Vue等框架） #

• 全局CSS变量方案：在全局样式的根选择器内定义统一变量，所有页面容器直接引用该变量即可

  /* 全局样式文件定义 */
  :root {
    --global-screen-padding: 16px;
  }
  
  /* 所有页面容器复用变量 */
  .page-wrapper {
    padding: var(--global-screen-padding);
  }
  

• 如果使用UI组件库（如Ant Design、Element UI等），可以直接在组件库的全局主题配置中新增自定义padding字段，所有页面和组件统一从主题实例中取值即可。

React Native #

• 封装全局统一的页面根容器组件，同时单独维护全局主题配置文件，后续修改仅调整主题文件的对应值即可

  // theme.js 全局主题配置
  export const APP_THEME = {
    screenPadding: 16,
    // 其他全局配置项
  }
  
  // 封装通用页面容器组件
  import { View } from 'react-native';
  import { APP_THEME } from './theme.js';
  export const PageContainer = ({children, extraStyle}) => {
    return <View style={[{padding: APP_THEME.screenPadding}, extraStyle]}>{children}</View>
  }
  
  // 业务页面直接复用容器
  import { PageContainer } from './components/PageContainer';
  const HomePage = () => {
    return <PageContainer>
      {/* 页面业务内容 */}
    </PageContainer>
  }
  

Flutter #

• 可以在全局ThemeData中扩展自定义主题属性，或者封装统一的自定义Scaffold组件作为所有页面的根结构

  // 扩展全局主题配置
  ThemeData(
    extensions: const <ThemeExtension<dynamic>>[
      AppCustomTheme(
        screenPadding: EdgeInsets.all(16),
      ),
    ],
  )
  
  // 页面内取值
  final globalPadding = Theme.of(context).extension<AppCustomTheme>()!.screenPadding;
  

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