Flutter基础:Flutter中的div——Container(上)

简介: 将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。

Container基础用法


通过color属性生成一个黄色的Container


Container(
    color: Colors.yellow,
);



通过margin属性设置这个Container的外边距


Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)



通过decoration属性来将这个Container设置成圆形,注意Containercolor属性和decoration属性只能存其一,不能同时提供


Container(
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)



Container加一个绿色的child Container,此时child会充满父widget的空间


Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);



为子Container设置宽高并通过alignment属性使其居中:


Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        width: 200,
        height: 100,
    ),
);



通过margin来使其居中


Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    ),
);



相关文章
|
7月前
|
容器
Flutter Container设置 width 无效
Flutter Container设置 width 无效
|
9月前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter Dart语言基础语法解析
【4月更文挑战第30天】Dart是Google为Flutter框架打造的高效编程语言,具有易学性、接口、混入、抽象类等特性。本文概述了Dart的基础语法,包括静态类型(如int、String)、控制流程(条件、循环)、函数、面向对象(类与对象)和异常处理。此外,还介绍了库导入与模块使用,帮助开发者快速入门Flutter开发。通过学习Dart,开发者能创建高性能的应用。
99 0
【Flutter前端技术开发专栏】Flutter Dart语言基础语法解析
Flutter 入门指南之 Dart 语言基础介绍
Dart是一种由Google开发的通用编程语言,用于构建跨平台的移动、Web和桌面应用程序。以下是Flutter入门指南中的Dart语言基础知识:
126 0
|
XML Java Android开发
Flutter(四)——基础组件
Flutter(四)——基础组件
393 0
Flutter(四)——基础组件
|
存储 索引
Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)
在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。
|
前端开发 程序员
Flutter路由管理与Navigator基础使用
Flutter的路由管理与Navigator基础使用
Flutter路由管理与Navigator基础使用
|
Dart 数据可视化
Flutter教程 — 基础组件(下)
Flutter的几个基础组件(下)
Flutter教程 — 基础组件(下)
|
Android开发 容器
Flutter教程 - 基础组件(上)
Flutter的几个基础组件解析(上)
Flutter教程 - 基础组件(上)

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 8
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 1
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    51
  • 2
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    34
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 4
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    70
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73
  • 8
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    25
  • 10
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    116