如何在Flutter中像HTML/CSS那样以类形式复用组件样式？

当然有！给你几种适合新手的实现方式，逻辑和你熟悉的HTML/CSS类用法相通：

1. 原生CSS类（最基础，零学习成本） #

直接写普通的CSS类，然后在需要复用样式的组件根元素上添加class属性就行，和纯HTML的用法完全一致。

示例：

/* 全局样式文件 style.css */
.common-card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: #fff;
}

在组件中使用：

// React组件示例
function UserCard() {
  return <div className="common-card">用户信息卡片</div>
}

function ProductCard() {
  return <div className="common-card">商品卡片</div>
}

<!-- Vue组件示例 -->
<template>
  <div class="common-card">商品卡片</div>
</template>

2. CSS预处理器的混合（Mixin） #

如果用Sass/Less这类预处理器，可以把重复样式写成可复用的“代码片段”，还能传参数微调样式，比纯CSS类更灵活。

示例（Sass）：

@mixin common-card($bg-color: #fff) {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: $bg-color;
}

// 复用基础样式，用默认背景
.user-card {
  @include common-card;
}

// 复用基础样式，自定义灰色背景
.product-card {
  @include common-card(#f5f5f5);
}

3. 组件级样式复用（框架自带） #

在React/Vue这类框架里，可以把样式和组件绑定，直接复用整个带样式的组件：

示例（React + Styled Components）：

import styled from 'styled-components';

// 定义带样式的基础组件
const CommonCard = styled.div`
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: #fff;
`;

// 直接复用这个组件
function UserCard() {
  return <CommonCard>用户信息卡片</CommonCard>
}

function ProductCard() {
  return <CommonCard>商品卡片</CommonCard>
}

4. 原子类工具库（比如Tailwind CSS） #

Tailwind这类工具库本身就是靠原子类复用样式，你可以直接重复写常用的原子类，也可以把常用组合定义成自定义类：

示例：

<!-- 直接重复使用原子类 -->
<div class="p-4 rounded-lg shadow-sm bg-white">用户卡片</div>
<div class="p-4 rounded-lg shadow-sm bg-white">商品卡片</div>

<!-- 或者在Tailwind配置里自定义复用类 -->
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      utilities: {
        'common-card': 'p-4 rounded-lg shadow-sm bg-white',
      },
    },
  },
}

之后直接用<div class="common-card">就能复用组合好的样式。

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