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

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

decorationforegroundDecoration有点像css中::before::after,区别是绘制顺序不同,foregroundDecoration可以用来装饰前景


// 使用decoration去设置
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        transform: Matrix4.rotationZ(0.2),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "快狗打车快狗打车",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)


// 使用foregroundDecoration去设置
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        transform: Matrix4.rotationZ(0.2),
        foregroundDecoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "快狗打车快狗打车",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)


效果对比:



可以看到,使用foregroundDecoration设置背景图时,背景图图片会盖在文字上方,使用decoration则相反


使用constraints来设置约束,用来约束自身,描述当前widget所允许占用的空间大小,通常使用BoxConstraint来设置约束条件。这里约束了子Container的最大和最小宽高


child Container无child的情况下,子Container会使用约束允许的最大高度和最大宽度,


Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 100,
            minWidth: 100
        ),
    ),      
);



child Container有child的情况,子Container会根据它的child的大小和约束来布局,本例中由于Text文本widget所占用的空间并未达到约束规定的最小空间,即最小宽高,这里直接按照约束中的最小宽高进行布局


Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打车",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);



如果将上面例子中Textwidget所需要占用的空间变大,例如将字体变大,则Text的父Container按最大约束空间进行布局


Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打车",
            textDirection: TextDirection.ltr,
            fontSize: 300,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);



以上就是Container的基本用法


参考




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