Flutter中Padding、Row 、Column 、Expanded 组件详解

aiguangyuan

已于 2025-03-17 22:56:43 修改

阅读量1.8k

点赞数 3

分类专栏： Flutter 文章标签：移动端开发 Flutter

于 2020-12-20 19:39:53 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/111460589

版权

Flutter 专栏收录该内容

62 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Flutter中的四个关键布局组件：Padding用于设置组件间间距，Row和Column分别用于水平和垂直布局，Expanded则用于实现灵活的占比布局。通过实例展示了这些组件的使用方法及效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Paddiing 组件

在 html 中常见的布局标签都可以使用 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性，这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

常见属性：

1. padding 内边距值；

2. child 子组件；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: Them