Flutter 布局 ↔ Android XML 布局 对照表（含常用属性）
面向快速查阅：Flutter 组件与 Android XML 视图/容器的一一对应与常见属性对照。
布局容器
| Flutter | Android XML | 用途/备注 | Flutter 常用属性 | Android 常用属性 |
|---|---|---|---|---|
| Container | FrameLayout / LinearLayout(单子项) | 单子项容器，背景/圆角/内外边距 | width, height, padding, margin, alignment, decoration(BoxDecoration: color, border, borderRadius, boxShadow) | layout_width/height, padding, margin, background, foreground, layout_gravity |
| Row | LinearLayout (horizontal) | 水平排布 | mainAxisAlignment, crossAxisAlignment, mainAxisSize, children | orientation="horizontal", gravity, layout_gravity |
| Column | LinearLayout (vertical) | 垂直排布 | mainAxisAlignment, crossAxisAlignment, mainAxisSize, children | orientation="vertical", gravity, layout_gravity |
| Expanded / Flexible | layout_weight | 占据剩余空间/权重 | flex, fit (tight/loose) | layout_weight, weightSum |
| Stack | FrameLayout / RelativeLayout / ConstraintLayout | 层叠定位 | alignment, fit, clipBehavior | FrameLayout: layout_gravity；Relative/Constraint: 定位约束 |
| Positioned | RelativeLayout/ConstraintLayout params | 绝对/相对定位 | left, right, top, bottom, width, height | layout_alignParent*, toStartOf/toEndOf, constraints |
| Align / Center | gravity / layout_gravity | 父内对齐 | alignment(Alignment) | gravity（父），layout_gravity（子） |
| Padding | View padding | 内边距 | padding(EdgeInsets) | padding |
| SizedBox | layout_width/height | 固定宽高/留白 | width, height | layout_width/height，空 View |
| Wrap | FlexboxLayout(支持库) / Flow | 自动换行流式布局 | direction, spacing, runSpacing, alignment | app:flexWrap, app:justifyContent, app:alignItems（FlexboxLayout） |
| ListView | RecyclerView / ListView | 可滚动列表 | builder, separated, itemExtent, physics | RecyclerView: adapter, layoutManager；ListView: divider, dividerHeight |
| GridView | RecyclerView + GridLayoutManager / GridView | 网格 | gridDelegate, crossAxisSpacing, mainAxisSpacing | spanCount(GridLayoutManager), verticalSpacing, horizontalSpacing |
| SingleChildScrollView | ScrollView / NestedScrollView | 单子项滚动 | scrollDirection, physics | fillViewport, nestedScrollingEnabled |
| PageView | ViewPager2 | 分页滑动 | controller, pageSnapping | offscreenPageLimit, orientation |
| SafeArea | fitsSystemWindows | 适配状态栏/刘海 | minimum, top/bottom | android:fitsSystemWindows |
| AspectRatio | ConstraintLayout ratio | 宽高比 | aspectRatio | app:layout_constraintDimensionRatio |
常用组件
| Flutter | Android XML | Flutter 常用属性 | Android 常用属性 |
|---|---|---|---|
| Text | TextView | style, maxLines, overflow, textAlign | textSize(sp), textColor, maxLines, ellipsize, gravity |
| Image | ImageView | image(Asset/Network/File), fit(BoxFit), colorBlendMode | src, scaleType, tint |
| Icon | ImageView(Vector) | size, color | srcCompat(vector), tint |
| ElevatedButton | Button (Material) | onPressed, style(elevation, shape, backgroundColor) | onClick, backgroundTint, textAllCaps |
| OutlinedButton | Button + shape drawable | onPressed, side, shape | background, stroke, ripple |
| TextButton | Button(flat) | onPressed, style | textColor, ripple |
| Switch | SwitchCompat | value, onChanged, activeColor | checked, onCheckedChange, thumbTint |
| Checkbox | CheckBox | value, onChanged, tristate | checked, buttonTint |
| Radio | RadioButton | value, groupValue, onChanged | checked, buttonTint |
| Slider | SeekBar | value, min/max, divisions, label | progress, max |
| TextField / TextFormField | EditText (+ TextInputLayout) | controller, decoration(hint, prefix/suffix), keyboardType, obscureText | hint, inputType, maxLines, imeOptions |
| CircularProgressIndicator | ProgressBar (indeterminate) | strokeWidth, value | style="?android:attr/progressBarStyleLarge", indeterminate |
| LinearProgressIndicator | ProgressBar (horizontal) | minHeight, value | style="?android:attr/progressBarStyleHorizontal" |
| Card | CardView | elevation, margin, shape | cardUseCompatPadding, cardCornerRadius, cardElevation |
| Divider | View(height=1dp) | thickness, indent, color | layout_height, background |
属性对照与要点
-
宽高与权重
- Flutter:
SizedBox/Container(width/height)或constraints；伸展用Expanded(flex)/Flexible(flex)。 - Android:
layout_width/height = wrap_content | match_parent；伸展用layout_weight（配合weightSum）。
- Flutter:
-
对齐与重力
- Flutter: 行列用
mainAxisAlignment/crossAxisAlignment；单子项用Align(alignment)/Center。 - Android: 父容器对齐
gravity，子视图在父内的对齐layout_gravity。
- Flutter: 行列用
-
间距
- Flutter:
padding/margin（Container(margin:)）或SizedBox间隔；列表分隔用Divider/ListView.separated。 - Android:
padding/layout_margin；LinearLayout可用divider/showDividers。
- Flutter:
-
叠放与定位
- Flutter:
Stack+Positioned(top/left/right/bottom)；复杂约束可用LayoutBuilder等。 - Android:
FrameLayout简单覆盖；RelativeLayout/ConstraintLayout精细约束（如 ratio）。
- Flutter:
-
圆角、边框、阴影
- Flutter:
BoxDecoration(borderRadius, border, boxShadow)；卡片阴影用Card或Material(elevation)。 - Android: shape drawable
<shape><corners/><stroke/></shape>；elevation/cardElevation。
- Flutter:
-
图片填充
- Flutter:
fit: BoxFit.cover / contain / fill。 - Android:
scaleType="centerCrop / fitCenter / fitXY"。
- Flutter:
-
滚动与复用
- Flutter:
ListView.builder/GridView.builder按需构建。 - Android:
RecyclerView+Adapter/ViewHolder复用。
- Flutter:
-
可见性
- Flutter:
Visibility（gone/invisible）、Offstage（不布局）。 - Android:
visibility="visible|invisible|gone"。
- Flutter:
-
点击反馈（波纹）
- Flutter:
InkWell/InkResponse（需有Material祖先）。 - Android:
foreground="?attr/selectableItemBackgroundBorderless"或ripple。
- Flutter:
详细属性对照与解释
1) 尺寸与约束（Size & Constraints）
| 目的 | Flutter | Android XML | 说明 |
|---|---|---|---|
| 固定宽高 | SizedBox(width, height) / Container(width, height) |
layout_width/height = 定值dp |
Flutter 中宽高为逻辑像素，Android 常用 dp；注意统一度量。 |
| 自适应内容 | 默认（未设置尺寸） | wrap_content |
子内容决定大小。 |
| 占满父容器 | SizedBox.expand() / Align(alignment).widthFactor/heightFactor |
match_parent |
Flutter 多通过父布局约束，或 Expanded 占满主轴剩余空间。 |
| 最小/最大约束 | ConstrainedBox/BoxConstraints |
需使用 ConstraintLayout 或在代码中测量 | Flutter 提供更直接的最小/最大边界控制。 |
| 比例 | AspectRatio(aspectRatio) |
app:layout_constraintDimensionRatio="W:H" |
Android 需用 ConstraintLayout 的 ratio。 |
2) Flex/权重（Row/Column ↔ LinearLayout weight）
| 概念 | Flutter | Android XML | 说明 |
|---|---|---|---|
| 主轴方向 | Row(横) / Column(竖) | LinearLayout orientation | 一致。 |
| 权重 | Expanded(flex: n) / Flexible(flex: n) |
layout_weight="n"（配合 weightSum 可选） |
多个子视图按权重分配主轴剩余空间。 |
| 主轴对齐 | mainAxisAlignment = start/end/center/spaceBetween/spaceAround/spaceEvenly |
gravity（对父），也可靠权重实现分布 |
Flutter 内置更丰富的分布方式。 |
| 交叉轴对齐 | crossAxisAlignment = start/end/center/stretch/baseline |
gravity（对子）+ layout_gravity |
Flutter 的 stretch 等价于 Android 子视图 match_parent 结合父 gravity。 |
常见映射：
mainAxisAlignment.spaceBetween≈ 子项均匀分布，首尾贴边；Android 需用weight或约束实现。crossAxisAlignment.stretch≈ 子项交叉轴拉伸；Android 子项match_parent。
3) 对齐（Alignment ↔ gravity/layout_gravity）
| Flutter Alignment | Android | 说明 |
|-------------------------|-------------------------------------------------|----------|--------|
| Alignment.center | gravity="center" 或子 layout_gravity="center" | 居中 |
| Alignment.topLeft | `gravity="top | start"` | 左上 |
| Alignment.topRight | `gravity="top | end"` | 右上 |
| Alignment.bottomLeft | `gravity="bottom | start"` | 左下 |
| Alignment.bottomRight | `gravity="bottom | end"` | 右下 |
| Alignment.centerLeft | `gravity="center_vertical | start"` | 垂直居中靠左 |
| Alignment.centerRight | `gravity="center_vertical | end"` | 垂直居中靠右 |
父容器整体对齐用 gravity，单个子视图在父内对齐用 layout_gravity。
4) 间距（Padding & Margin）
| Flutter | Android XML | 说明 |
|---|---|---|
Padding(padding: EdgeInsets.all(8)) |
padding="8dp" |
全部边同值 |
EdgeInsets.symmetric(horizontal: 8, vertical: 4) |
paddingStart/End/Top/Bottom |
水平/垂直对称 |
Container(margin: ...) |
layout_margin* |
外边距在 Android 用 layout_margin 系列属性 |
建议：统一使用 Android 的 dp 与 Flutter 的逻辑像素换算（一般 1:1 视觉等效）。
5) 文本（Text ↔ TextView）
| 需求 | Flutter | Android XML | 说明 |
|------|------------------------------------------------|------------------------------------|------------------------------------|--------|---|
| 字号 | style: TextStyle(fontSize: 16) | textSize="16sp" | Android 使用 sp，Flutter 逻辑像素接近 sp 语义 |
| 颜色 | TextStyle(color: Colors.red) | textColor | |
| 字重 | fontWeight: FontWeight.w600 | textStyle="bold" 或 setTypeface | Android XML 原生支持有限 |
| 行高 | height: 1.4 | lineSpacingMultiplier="1.4" | Flutter 行高为倍数（相对 fontSize） |
| 字间距 | letterSpacing: 0.5 | android:letterSpacing="0.05" | Android 为 em 单位（0.05≈5%） |
| 装饰 | decoration: TextDecoration.underline | paintFlags="underline" | |
| 对齐 | textAlign: center/left/right/justify | `gravity="center | start | end"` | |
| 溢出省略 | overflow: TextOverflow.ellipsis, maxLines: n | ellipsize="end", maxLines="n" | 两端省略/中间省略需要自定义 |
| 自动换行 | softWrap: true | 默认换行 | |
6) 图片填充（BoxFit ↔ scaleType）
Flutter BoxFit |
Android scaleType |
行为 |
|---|---|---|
contain |
fitCenter |
等比完整显示，可能留白 |
cover |
centerCrop |
等比裁剪铺满，可能截断 |
fill |
fitXY |
拉伸铺满，可能变形 |
fitWidth |
fitStart/fitEnd + 尺寸控制 |
宽度充满，等比缩放 |
none |
center |
原始大小置中 |
7) 背景、圆角、边框、阴影
| 效果 | Flutter | Android XML | 说明 |
|---|---|---|---|
| 背景色 | Container(color) 或 decoration.color |
background |
Flutter 建议使用 decoration |
| 圆角 | borderRadius: BorderRadius.circular(8) |
<shape><corners android:radius="8dp"/></shape> |
Android 采用 shape drawable |
| 边框 | border: Border.all(color, width) |
<stroke android:width="1dp" android:color="..."/> |
|
| 阴影 | boxShadow / Material(elevation) |
elevation / cardElevation |
Flutter 的 elevation 需 Material 语义 |
8) 可见性与占位
| 场景 | Flutter | Android XML | 说明 |
|---|---|---|---|
| 占位但不可见 | Visibility(visible: false, maintainSize: true) |
visibility="invisible" |
仍占据空间 |
| 不占位隐藏 | Visibility(visible: false) / Offstage(offstage: true) |
visibility="gone" |
不参与布局 |
9) 交互与手势
| 功能 | Flutter | Android | 说明 |
|---|---|---|---|
| 点击 | GestureDetector(onTap) / InkWell |
android:onClick 或 setOnClickListener |
Flutter 的 InkWell 有水波纹反馈 |
| 长按 | onLongPress |
setOnLongClickListener |
|
| 滑动 | onPan* / onHorizontalDrag* |
OnTouchListener + GestureDetector |
复杂手势 Flutter 更便捷 |
10) 滚动与惯性
| 需求 | Flutter | Android | 说明 |
|---|---|---|---|
| 惯性/物理 | physics: BouncingScrollPhysics / ClampingScrollPhysics |
OverScrollMode, EdgeEffect |
iOS 风格回弹用 Bouncing |
| 嵌套滚动 | NestedScrollView/Slivers |
NestedScrollView |
都支持 AppBar 联动等高级效果 |