登录代碼案例：CSS 屬性對照
CSS 屬性對照
內容： CSS 常用屬性與 Flutter Widget 屬性的逐一對照，每個部分都是可直接運行的 Widget demo。
涵蓋 10 個模塊：
| 模塊 | CSS | Flutter |
|---|---|---|
| 盒模型 | width/height/padding/margin/border/border-radius |
Container + BoxDecoration
|
| 文字樣式 | font-size/color/font-weight/letter-spacing/line-height/text-decoration |
TextStyle |
| Flex 佈局 | display:flex/flex-direction/justify-content/align-items/flex-wrap/gap/flex:1 |
Row/Column/Expanded/Wrap |
| 定位 | position:relative/absolute/fixed/top/left/z-index |
Stack + Positioned
|
| 尺寸約束 | width:100%/max-width/min-width/fit-content |
SizedBox/ConstrainedBox/IntrinsicWidth |
| 變換 | transform:rotate/scale/translate |
Transform.rotate/scale/translate |
| 顯示隱藏 | display:none/visibility:hidden/opacity:0 |
Visibility/Opacity + 三元表達式 |
| 陰影 | box-shadow/text-shadow |
BoxShadow/Shadow |
| 漸變 | linear-gradient/radial-gradient |
LinearGradient/RadialGradient |
| 響應式 | @media (max-width: 600px) |
MediaQuery.of(context).size.width |
运行
在线效果可以复制到：dartpad.dev/ 查看，更推荐本地flutter build web调试学习
效果图
学习代码
import 'package:flutter/material.dart';
// ============================================================
// CSS → Flutter 完整对照手册
// ============================================================
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(home: Scaffold(body: CssToFlutter()));
}
}
class CssToFlutter extends StatelessWidget {
const CssToFlutter({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
_BoxModel(),
_TextStyle(),
_FlexLayout(),
_PositionLayout(),
_SizeConstraint(),
_Transform(),
_Visibility(),
_Shadow(),
_Gradient(),
_Responsive(),
],
),
);
}
}
// ============================================================
// 一、盒模型
// CSS: width / height / padding / margin / border / border-radius / background
// ============================================================
class _BoxModel extends StatelessWidget {
const _BoxModel();
@override
Widget build(BuildContext context) {
return Container(
// CSS: width: 200px
width: 200,
// CSS: height: 200px
height: 200,
// CSS: margin: 20px
margin: const EdgeInsets.all(20),
// CSS: padding: 16px
padding: const EdgeInsets.all(16),
// CSS: padding: 10px 20px → 上下10 左右20
// padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
// CSS: padding: 10px 20px 30px 40px → 上右下左
// padding: const EdgeInsets.fromLTRB(40, 10, 20, 30),
decoration: BoxDecoration(
// CSS: background: blue
color: Colors.blue,
// CSS: border-radius: 20px
borderRadius: BorderRadius.circular(20),
// CSS: border-radius: 10px 20px 30px 40px
// borderRadius: const BorderRadius.only(
// topLeft: Radius.circular(10),
// topRight: Radius.circular(20),
// bottomRight: Radius.circular(30),
// bottomLeft: Radius.circular(40),
// ),
// CSS: border: 3px solid yellow
border: Border.all(width: 3, color: Colors.yellow),
// CSS: border-top: 3px solid red → 单边边框
// border: const Border(top: BorderSide(width: 3, color: Colors.red)),
),
child: const Text('盒模型'),
);
}
}
// ============================================================
// 二、文字样式
// CSS: font-size / color / font-weight / font-style / letter-spacing /
// line-height / text-align / text-decoration / overflow
// ============================================================
class _TextStyle extends StatelessWidget {
const _TextStyle();
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'文字样式示例',
style: const TextStyle(
// CSS: font-size: 24px
fontSize: 24,
// CSS: color: red
color: Colors.red,
// CSS: font-weight: bold
fontWeight: FontWeight.bold,
// CSS: font-weight: 300
// fontWeight: FontWeight.w300,
// CSS: font-style: italic
fontStyle: FontStyle.italic,
// CSS: letter-spacing: 2px
letterSpacing: 2,
// CSS: line-height: 1.5
height: 1.5,
// CSS: text-decoration: underline
decoration: TextDecoration.underline,
// CSS: text-decoration: line-through
// decoration: TextDecoration.lineThrough,
),
// CSS: text-align: center
textAlign: TextAlign.center,
// CSS: overflow: hidden; white-space: nowrap; text-overflow: ellipsis
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
// CSS: text-transform: uppercase → Flutter 无内置，用 .toUpperCase()
Text('hello'.toUpperCase()),
],
);
}
}
// ============================================================
// 三、Flex 布局
// CSS: display:flex / flex-direction / justify-content /
// align-items / flex-wrap / gap / flex:1
// ============================================================
class _FlexLayout extends StatelessWidget {
const _FlexLayout();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: display:flex; flex-direction: row; justify-content: space-between; align-items: center
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // justify-content
crossAxisAlignment: CrossAxisAlignment.center, // align-items
children: const [
Text('左'),
Text('中'),
Text('右'),
],
),
// CSS: display:flex; flex-direction: column; align-items: center
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text('上'),
Text('中'),
Text('下'),
],
),
// CSS: flex: 1（占满剩余空间）
Row(
children: [
Expanded(
child: Container(color: Colors.red, height: 40)), // flex: 1
Expanded(
child: Container(color: Colors.blue, height: 40)), // flex: 1
],
),
// CSS: flex: 2 / flex: 1（按比例）
Row(
children: [
Expanded(
flex: 2,
child: Container(color: Colors.green, height: 40)), // flex: 2
Expanded(
flex: 1,
child: Container(color: Colors.orange, height: 40)), // flex: 1
],
),
// CSS: flex-wrap: wrap; gap: 8px
Wrap(
spacing: 8, // CSS: column-gap
runSpacing: 8, // CSS: row-gap
children: List.generate(
6,
(i) => Container(
width: 80,
height: 40,
color: Colors.purple,
child: Center(child: Text('item $i')),
),
),
),
// justify-content 对照表：
// flex-start → MainAxisAlignment.start
// flex-end → MainAxisAlignment.end
// center → MainAxisAlignment.center
// space-between → MainAxisAlignment.spaceBetween
// space-around → MainAxisAlignment.spaceAround
// space-evenly → MainAxisAlignment.spaceEvenly
// align-items 对照表：
// flex-start → CrossAxisAlignment.start
// flex-end → CrossAxisAlignment.end
// center → CrossAxisAlignment.center
// stretch → CrossAxisAlignment.stretch
// baseline → CrossAxisAlignment.baseline
],
);
}
}
// ============================================================
// 四、定位
// CSS: position: relative/absolute/fixed、top/left/right/bottom、z-index
// ============================================================
class _PositionLayout extends StatelessWidget {
const _PositionLayout();
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 200,
// CSS: position: relative（父容器）
child: Stack(
children: [
// 普通流中的元素
Container(color: Colors.grey),
// CSS: position: absolute; top: 10px; left: 10px; z-index: 1
const Positioned(
top: 10,
left: 10,
child: Text('左上角'),
),
// CSS: position: absolute; bottom: 0; right: 0
const Positioned(
bottom: 0,
right: 0,
child: Text('右下角'),
),
// CSS: position: absolute; top:50%; left:50%; transform: translate(-50%,-50%)
const Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Text('居中'),
),
),
// Stack 里越靠后的 child z-index 越高，对应 CSS z-index
],
),
);
}
}
// ============================================================
// 五、尺寸与约束
// CSS: width / height / max-width / min-width / max-height / min-height / box-sizing
// ============================================================
class _SizeConstraint extends StatelessWidget {
const _SizeConstraint();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: width: 200px; height: 50px
const SizedBox(width: 200, height: 50),
// CSS: width: 100%（撑满父级宽度）
const SizedBox(width: double.infinity, height: 50),
// CSS: max-width: 300px; min-width: 100px
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100,
maxWidth: 300,
minHeight: 40,
maxHeight: 100,
),
child: Container(color: Colors.teal),
),
// CSS: width: fit-content（包裹内容）
IntrinsicWidth(
child:
Container(color: Colors.amber, child: const Text('fit-content')),
),
],
);
}
}
// ============================================================
// 六、变换
// CSS: transform: rotate / scale / translate
// ============================================================
class _Transform extends StatelessWidget {
const _Transform();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: transform: rotate(0.05rad)
Transform.rotate(
angle: 0.05,
child: Container(width: 100, height: 50, color: Colors.blue),
),
// CSS: transform: scale(1.5)
Transform.scale(
scale: 1.5,
child: Container(width: 100, height: 50, color: Colors.green),
),
// CSS: transform: translate(20px, 10px)
Transform.translate(
offset: const Offset(20, 10),
child: Container(width: 100, height: 50, color: Colors.red),
),
],
);
}
}
// ============================================================
// 七、显示与隐藏
// CSS: display: none / visibility: hidden / opacity: 0
// ============================================================
class _Visibility extends StatelessWidget {
const _Visibility();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: display: none（不占位，从树中移除）
Visibility(
visible: false,
child: Container(width: 100, height: 50, color: Colors.red),
),
// CSS: visibility: hidden（占位，但不可见）
Visibility(
visible: false,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: Container(width: 100, height: 50, color: Colors.red),
),
// CSS: opacity: 0.5
Opacity(
opacity: 0.5,
child: Container(width: 100, height: 50, color: Colors.blue),
),
// 简单显隐：三元表达式（display:none 等价）
// condition ? MyWidget() : const SizedBox.shrink(),
],
);
}
}
// ============================================================
// 八、阴影
// CSS: box-shadow / text-shadow
// ============================================================
class _Shadow extends StatelessWidget {
const _Shadow();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: box-shadow: 4px 4px 8px rgba(0,0,0,0.3)
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Color(0x4D000000), // rgba(0,0,0,0.3)
offset: Offset(4, 4), // x, y
blurRadius: 8, // blur
spreadRadius: 0, // spread
),
],
),
),
// CSS: text-shadow: 2px 2px 4px rgba(0,0,0,0.5)
const Text(
'文字阴影',
style: TextStyle(
shadows: [
Shadow(
color: Color(0x80000000),
offset: Offset(2, 2),
blurRadius: 4,
),
],
),
),
],
);
}
}
// ============================================================
// 九、渐变
// CSS: background: linear-gradient / radial-gradient
// ============================================================
class _Gradient extends StatelessWidget {
const _Gradient();
@override
Widget build(BuildContext context) {
return Column(
children: [
// CSS: background: linear-gradient(to right, red, blue)
Container(
width: 200,
height: 60,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft, // to left
end: Alignment.centerRight, // to right
colors: [Colors.red, Colors.blue],
),
),
),
// CSS: background: linear-gradient(135deg, red, blue)
Container(
width: 200,
height: 60,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.red, Colors.blue],
),
),
),
// CSS: background: radial-gradient(circle, red, blue)
Container(
width: 200,
height: 60,
decoration: const BoxDecoration(
gradient: RadialGradient(
colors: [Colors.red, Colors.blue],
),
),
),
],
);
}
}
// ============================================================
// 十、响应式
// CSS: @media (max-width: 600px)
// ============================================================
class _Responsive extends StatelessWidget {
const _Responsive();
@override
Widget build(BuildContext context) {
// CSS: @media 等价于读取屏幕尺寸
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final isSmall = screenWidth < 600;
return Column(
children: [
// CSS: @media (max-width: 600px) { font-size: 14px } else { font-size: 20px }
Text(
'响应式文字',
style: TextStyle(fontSize: isSmall ? 14 : 20),
),
// CSS: @media (max-width: 600px) { flex-direction: column }
isSmall
? const Column(children: [Text('A'), Text('B')])
: const Row(children: [Text('A'), Text('B')]),
Text('屏幕宽: $screenWidth, 高: $screenHeight'),
],
);
}
}
