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),
    ),
);



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