Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >Flutter 中 Padding、Row 、Column 、Expanded 组件详解

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

作者头像
越陌度阡
发布于 2020-12-22 07:42:58
发布于 2020-12-22 07:42:58
2K0
举报
文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）
关联问题
换一批

1. Paddiing 组件

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

常见属性：

1. padding：内边距值。值类型EdgeInsets；

2. child：子组件。值的类型为Widget；

代码示例：

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// Padding内边距的使用
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return  Padding(
            // 给整个容器右边添加内边距
            padding: EdgeInsets.fromLTRB(0,0,10,0),
            child: GridView.count(
                // 定义一行几列
                crossAxisCount:2,
                // 长宽比例
                childAspectRatio:1.7,
                children:<Widget>[
                    Padding(
                        // 定义左、上内边距
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        // 子元素
                        child: Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
                    ),

                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                        child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover)
                    )
                ],
            )
        );
    }
}

效果图如下：

需要注意的是，以上图片的间隙由内外两层内边距组合使用而得出来的。

2. Row 组件

Row 组件主要用于需要水平布局的情况。

常见属性：

1. mainAxisAlignment：主轴的组件对齐方式。值的类型MainAxisAlignment；

2. crossAxisAlignment：次轴的组件对齐方式。值的类型CrossAxisAlignment；

3. children：组件子元素。值的类型为Widget；

代码示例：

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}
// Row水平布局组件的使用
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Container(
            // 宽度
            width:500,
            // 高度
            height:500,
            // 背景颜色
            color:Colors.red,
            // 水平布局组件
            child: Row(
                // 定义水平对齐的方式，类似于CSS里的flex-decration
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                // 定义元素相对父容器的垂直对齐方式
                crossAxisAlignment: CrossAxisAlignment.center,
                // 子元素
                children: <Widget>[
                    // 调用自定义的图标组件传参
                    IconContainer(Icons.search,color:Colors.black,size:40.0),
                    IconContainer(Icons.home,color:Colors.green,size:40.0),
                    IconContainer(Icons.select_all,color:Colors.blue,size:40.0)
                ],
            )
        );
    }
}


// 定义传入图标的类
class IconContainer extends StatelessWidget{

    double size = 32.0;
    Color color = Colors.red;
    IconData icon;

    // 构造函数
    IconContainer(this.icon,{this.color,this.size});

    @override
    Widget build(BuildContext context) {
        return Container(
            // 宽度
            height:100.0,
            // 高度
            width:100.0,
            // 背景颜色
            color:this.color,
            // 子元素
            child:Center(
                child: Icon(this.icon,size:this.size,color:Colors.white)
            )
        );
    }
}

效果图如下：

3. Column组件

Column 组件主要用于需要垂直布局的情况。

常见属性：

1. mainAxisAlignment：主轴的组件对齐方式。值的类型MainAxisAlignment；

2. crossAxisAlignment：次轴的组件对齐方式。值的类型CrossAxisAlignment；

3. children：组件子元素。值的类型为Widget；

代码示例：

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// Column垂直布局组件的使用
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Container(
            // 宽度
            width:500,
            // 高度
            height:500,
            // 背景颜色
            color:Colors.red,
            // 垂直布局组件
            child: Column(
                // 定义垂直对齐的方式，类似于CSS里的flex-decration
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                // 定义元素相对父容器的水平对齐方式
                crossAxisAlignment: CrossAxisAlignment.center,
                // 子元素
                children: <Widget>[
                    // 调用自定义的图标组件传参
                    IconContainer(Icons.search,color:Colors.black,size:40.0),
                    IconContainer(Icons.home,color:Colors.green,size:40.0),
                    IconContainer(Icons.select_all,color:Colors.blue,size:40.0)
                ],
            )
        );
    }
}

效果图如下：

4. Expanded组件

Expanded 类似 Web 开发中的Flex布局，可以用在 Row 和 Column 布局中以定义该子组件所占的百分比。

常见属性：

1. flex 子组件占整个父组件比例。值为num类型；

2. child 子组件。值的类型为Widget；

代码示例：

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// Expanded组件的使用，定义一行中每个元素的百分比
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return  Row(
            // 子元素
            children: <Widget>[
                Expanded(
                    flex:1,
                    child:IconContainer(Icons.search,color:Colors.red,size:40.0),
                ), 
                Expanded(
                    flex:2,
                    child:IconContainer(Icons.home,color:Colors.black,size:40.0),
                ),
                Expanded(
                    flex:1,
                    child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),
                ),
            ],
        );
    }
}


// 定义传入图标的类
class IconContainer extends StatelessWidget{

    double size = 32.0;
    Color color = Colors.red;
    IconData icon;

    // 构造函数
    IconContainer(this.icon,{this.color,this.size});

    @override
    Widget build(BuildContext context) {
        return Container(
            // 宽度
            height:100.0,
            // 高度
            width:100.0,
            // 背景颜色
            color:this.color,
            // 子元素
            child:Center(
                child: Icon(this.icon,size:this.size,color:Colors.white)
            )
        );
    }
}

效果图如下：

利用Expanded实现一个左侧固定，右侧自适应的布局。

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}
// Expanded组件实现左侧固定宽度，右侧自适应的布局
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return  Row(
            // 子元素
            children: <Widget>[
                // 左侧组件固定宽度
                IconContainer(Icons.search,color:Colors.red,size:40.0),
                // 右侧组件自适应
                Expanded(
                    // 自适应时值为1即可
                    flex:1,
                    child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),
                ),
            ],
        );
    }
}

// 定义传入图标的类
class IconContainer extends StatelessWidget{

    double size = 32.0;
    Color color = Colors.red;
    IconData icon;

    // 构造函数
    IconContainer(this.icon,{this.color,this.size});

    @override
    Widget build(BuildContext context) {
        return Container(
            // 宽度
            height:100.0,
            // 高度
            width:100.0,
            // 背景颜色
            color:this.color,
            // 子元素
            child:Center(
                child: Icon(this.icon,size:this.size,color:Colors.white)
            )
        );
    }
}

效果图如下：

5. 布局实例

实现下图的布局：

代码如下：

代码语言：javascript
AI代码解释
复制
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: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 布局实例
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Row(
                    children: <Widget>[
                        Expanded(
                            child:Container(
                                height:180,
                                color:Colors.black,
                                child: Text('你好，Flutter'),
                            ),
                        )
                    ],
                ),
                SizedBox(height:10),
                Row(
                    children: <Widget>[
                        Expanded(
                            flex: 2,
                            child:Container(
                                height:180,
                                child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)
                            ) 
                        ),
                        SizedBox(width:10),
                        Expanded(
                            flex:1,
                            child:Container(
                                height:180,
                                child:ListView(
                                    children: <Widget>[
                                        Container(
                                            height:85,
                                            child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)
                                        ),
                                        SizedBox(height:10),
                                        Container(
                                            height:85,
                                            child:Image.network("http://www.itying.com/images/flutter/2.png",fit:BoxFit.cover)
                                        )
                                    ], 
                                )
                            )
                        )
                    ],
                )
            ],
        );
    }
}
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/12/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
网站

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

网站
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
8525
Go 开发者必备：Protocol Buffers 入门指南
5358
10分钟带你彻底搞懂分布式链路跟踪
4225
多租户的 4 种常用方案
7673
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
5409
60页PPT全解：DeepSeek系列论文技术要点整理
7012
Flutter入门（二）
编程算法
* Padding(个人感觉和Container很像)（下面的代码很难看，重要的是思路）
用户3112896
2019/12/27
6580
Flutter入门（二）
Flutter组件随笔练习
listviewbuttongridviewimagestack
Container组件 import 'package:flutter/material.dart'; //快捷方式:fim void main() { runApp(MyApp()); } //自定义组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp(
明知山
2020/09/02
1.1K0
Flutter入门（一）
flutterioside打包android
Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases
用户3112896
2019/12/27
8270
Flutter入门（一）
Padding、Row、Column、Expanded、Stack、AspectRatio、Card、Wrap等布局组件初体验
编程算法网站
在HTML中，常见的布局标签都有padding属性，但是在Flutter中，很多的widget是没有padding属性的。这时我们就可以使用padding组件来处理容器与子元素之间的间距。
拉维
2019/08/12
8770
Padding、Row、Column、Expanded、Stack、AspectRatio、Card、Wrap等布局组件初体验
Flutter中ListView 垂直列表组件、水平列表组件
listviewandroid
列表布局是项目开发中最常用的一种布局方式，Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。
越陌度阡
2022/05/06
1.9K0
Flutter中ListView 垂直列表组件、水平列表组件
Flutter 中 ListView 垂直列表组件、水平列表组件
listviewandroid
列表布局是项目开发中最常用的一种布局方式，Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。
越陌度阡
2020/12/21
2.4K0
Flutter 中 ListView 垂直列表组件、水平列表组件
6.Flutter学习之Padding，Row,Column,Expanded组件
编程算法flutter网站iosandroid
参考博客： 笔录Flutter（五）布局系列：Row、Column、Flex、Expanded 常用属性、使用 https://blog.csdn.net/huyongl1989/article/details/83745871 https://blog.csdn.net/gzx110304/article/details/101627286
易帜
2022/02/09
4240
6.Flutter学习之Padding，Row,Column,Expanded组件
flutter基础布局代码
flutterdart基础
骨灰级别的基础代码，只是做个简单的记录，方便以后看 都是用dart写的，都在flutter项目下的lib文件夹下 import 'package:flutter/material.dart'; import './tomFont.dart'; void main() { runApp( MaterialApp( theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold(
Tom2Code
2023/02/14
8420
flutter基础布局代码
Flutter中AspectRatio、Card 卡片组件
网站
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
越陌度阡
2020/12/23
2K0
Flutter中AspectRatio、Card 卡片组件
Flutter入门（四）
appsetstatetabbar微信公众号
自定义的好处是可以在addListener中增加监听，通过setState修改状态
用户3112896
2019/12/27
1.6K0
Flutter这么火为什么不了解一下呢？（下）
iosandroid
Note: 如何代码实现有问题，可以依据Github上的lib/main.dart 来检查你的代码。
Android技术干货分享
2019/03/26
1.5K0
Flutter这么火为什么不了解一下呢？（下）
【Flutter 16】图解 ListView 异步加载数据与 Loading 等待
json网站iosandroid腾讯云测试服务
和尚前两天再学 ListView 时，整理了一下在列表中展示多种不同 item 样式，今天继续深入学习异步请求数据并加载新闻列表以及初始进入页面的 loading 等小知识点。暂时还没有学习下拉刷新与上划加载更多。
阿策小和尚
2019/08/12
3.9K0
【Flutter 16】图解 ListView 异步加载数据与 Loading 等待
Flutter中构建布局 顶
其他
然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。
南郭先生
2018/08/14
47.9K0
Flutter中构建布局 顶
【Flutter 专题】07 您搭好【登录】页面了么？
iosandroid编程算法网站
和尚最近在利用业余时间学习 Flutter，还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手，在实践过程中结合官网文档才能更快的学习和理解。因为和尚技术太差，花了很久才搭建了一个最简单的【登录】页面，对于同一个页面，搭建的方式千差万别，和尚的方式也绝非最佳，现在仅结合这个基本的【登录】页面记录整理一下遇到的问题。 和尚这次整理的小博客只是单纯的搭建页面，不涉及以无逻辑和页面跳转，毕竟和尚还没研究到那部分。
阿策小和尚
2019/08/12
1.3K0
【Flutter 专题】07 您搭好【登录】页面了么？
【Flutter 专题】08 小小优化【登录】页面
ios网站listviewandroid
和尚前两天花了很久才搭建了一个最简单的【登录】页面，但依然还有很多需要优化的地方，和尚又花了很久的时间尝试做了一点点的优化，仅针对优化的部分简单整理一下。
阿策小和尚
2019/08/12
1.8K0
【Flutter 专题】08 小小优化【登录】页面
Flutter组件学习（二）—— Image
apiandroidide.netgo
上一节中，我们讲了 Flutter 中 Text 组件的一些用法以及 API，本节我们继续学习 Flutter 中的 Image 组件，同样先上图：
用户2802329
2018/12/21
1.6K0
Flutter一切皆widget但是不要将所有东西放入一个widget
flutteriosandroid网站
作为 Flutter 开发人员，我相信您在您的开发生活中至少听说过这句流行的句子：“**一切都是widget”。这是 Flutter 的口头禅，它揭示了这个非常好的 SDK 的内在力量！
徐建国
2021/11/30
1.5K0
Flutter一切皆widget但是不要将所有东西放入一个widget
Flutter中GridView网格列表组件的使用
builderchildrencountgridviewpadding
当数据量很大的时候用矩阵方式排列比较清晰，此时我们可以用网格列表组件 GridView 实现布局。
越陌度阡
2022/05/06
4.6K0
Flutter中GridView网格列表组件的使用
Flutter GridView 使用
flutter
今天学习一下在Flutter中怎么使用GridView，效果如上图。 头部是一个Banner，使用的是第三方的
赵哥窟
2019/09/20
2.5K0
Flutter GridView 使用
超过百万的StackOverflow Flutter 问题-第二期
编程算法flutterandroidandroid studioios
老孟导读：一个月前分享的《超过百万的StackOverflow Flutter 问题-第一期》受到很多朋友的喜欢，非常感谢大家的支持，在文章末尾有第一期的链接，希望此文能对你有所帮助。
老孟Flutter
2020/09/11
2K0
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
iOS端的RSA/ECB/OAEPWithSHA-256AndMGF1Padding 加密 ？flutter和原生混编，flutter部分代码图片无法加载？python如何实现RSA/ECB/PKCS1Padding 解密,网上只找到java的？
相关课程
数字化IT从业者知识体系微信小程序应用实践_《锋运票务系统》微信小程序直播电商开发实践_《锋巢直播》
Flutter入门（二）
6580
Flutter组件随笔练习
1.1K0
Flutter入门（一）
8270
Padding、Row、Column、Expanded、Stack、AspectRatio、Card、Wrap等布局组件初体验
8770
Flutter中ListView 垂直列表组件、水平列表组件
1.9K0
Flutter 中 ListView 垂直列表组件、水平列表组件
2.4K0
6.Flutter学习之Padding，Row,Column,Expanded组件
4240
flutter基础布局代码
8420
Flutter中AspectRatio、Card 卡片组件
2K0
Flutter入门（四）
1.6K0
Flutter这么火为什么不了解一下呢？（下）
1.5K0
【Flutter 16】图解 ListView 异步加载数据与 Loading 等待
3.9K0
Flutter中构建布局 顶
47.9K0
【Flutter 专题】07 您搭好【登录】页面了么？
1.3K0
【Flutter 专题】08 小小优化【登录】页面
1.8K0
Flutter组件学习（二）—— Image
1.6K0
Flutter一切皆widget但是不要将所有东西放入一个widget
1.5K0
Flutter中GridView网格列表组件的使用
4.6K0
Flutter GridView 使用
2.5K0
超过百万的StackOverflow Flutter 问题-第二期
2K0
相关推荐
Flutter入门（二）
更多 >
越陌度阡0
LV.1
这个人很懒，什么都没有留下～
文章
795
获赞
1.5K
专栏
1
作者相关精选
换一批
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入腾讯云技术交流站
前端技术前沿探索 云开发实战案例分享
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
换一批
加入讨论
的问答专区 >
五子头0
相关课程
一站式学习中心 >
数字化IT从业者知识体系
527人在学
CODING DevOps
软件开发
微信小程序应用实践_《锋运票务系统》
346人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
微信小程序直播电商开发实践_《锋巢直播》
249人在学
Serverless 容器服务
云数据库 SQL Server
小程序·云直播
即时通信 IM
云直播
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1
目录