Flutter之Container

1、Container介绍

我们先看它的构造方法

  Container({
    Key key,
    this.alignment,
    this.padding, //容器内补白,属于decoration的装饰范围
    Color color, // 背景色
    Decoration decoration, // 背景装饰
    Decoration foregroundDecoration, //前景装饰
    double width,//容器的宽度
    double height, //容器的高度
    BoxConstraints constraints, //容器大小的限制条件
    this.margin,//容器外补白,不属于decoration的装饰范围
    this.transform, //变换
    this.child,
    this.clipBehavior = Clip.none,
  })

Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景

2、代码测试

代码测试1、

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Container(
               margin: EdgeInsets.only(top: 50, left: 50),
               constraints: BoxConstraints.tightFor(width: 200, height: 150),
               decoration: BoxDecoration(
                    gradient: RadialGradient( //背景径向渐变
                        colors: [Colors.red, Colors.orange],
                        center: Alignment.topLeft,
                        radius: .98
                    ),
                    borderRadius:BorderRadius.all(Radius.circular(5)),
                    boxShadow: [ //卡片阴影
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2.0, 2.0),
                          blurRadius: 4.0
                      )
                    ]
               ),
               alignment: Alignment.center,
               child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
            ),
          ),
      );
  }

代码测试2、

    @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Padding(
              padding: EdgeInsets.all(30),
              child: DecoratedBox(
                decoration: BoxDecoration(
                   color: Colors.blue
                ),
                child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
              ),
            )
          ),
      );
  }

代码测试3、

    @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'open url',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello flutter'),
          ),
          body: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.blue
            ),
            child: Padding(
               padding: EdgeInsets.all(40),
               child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
            ),
          ),
      ),
    );
  }

代码测试4、

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'open url',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello flutter'),
          ),
          body: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("chenyu1"),
              Text("chenyu2"),
              Container(
                margin: EdgeInsets.all(20),
                color: Colors.red,
                child: Text("chenyu3", style: TextStyle(fontSize: 40, color: Colors.white)),
              ),
              Container(
                padding: EdgeInsets.all(20),
                color: Colors.red,
                child: Text("chenyu4", style: TextStyle(fontSize: 40, color: Colors.white)),
              ),
            ],
          ),
      ),
    );
  }

3、运行结果

4、总结

Container(
  margin: EdgeInsets.all(20.0), //容器外补白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器内补白
  color: Colors.orange,
  child: Text("Hello world!"),
),

等价下面的代码

Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),
(0)

相关推荐

  • Flutter-BottomNavigationBar的使用说明

    Flutter-BottomNavigationBar的使用说明 在目前的app使用过程中,使用最多的场景莫过于有一个底部的Tabbar,在Flutter中也有类似的Widget,这个Widget就是 ...

  • Flutter 学习

    一.认识Fluter 几乎完全还原手机app,相当于原生app. 二.环境搭建(Windows) Windows 7以上64位系统,磁盘空间大于3个G,因为要安装模拟虚拟机 1.java环境的安装,下 ...

  • 【老孟Flutter】如何提高Flutter应用程序的性能

    首先 Flutter 是一个非常高性能的框架,因此大多时候不需要开发者做出特殊的处理,只需要避免常见的性能问题即可获得高性能的应用程序. 重建最小化原则 在调用 setState() 方法重建组件时, ...

  • 【老孟Flutter】源码分析系列之InheritedWidget

    老孟导读:这是2021年源码系列的第一篇文章,其实源码系列的文章不是特别受欢迎,一个原因是原理性的知识非常枯燥,我自己看源码的时候特别有感触,二是想把源码分析讲的通俗易懂非常困难,自己明白 和 让别人 ...

  • 如何利用Flutter实现好友列表(内涵源码)

    早前的<HelloWorld>公开课,资深大前端开发工程师阿佑老师为我们详细介绍了如何利用Flutter做界面开发.学员们反馈意犹未尽,问还没有关于Flutter的公开课.4月24日,阿佑 ...

  • Flutter 2.2发布:针对各平台的性能优化、完善生态支持

    局长 OSC开源社区 昨天 文 | 局长 出品 | OSC开源社区(ID:oschina2013) 谷歌在昨日举办的 Google I/O 2021 大会上宣布了 Flutter 2.2,其开发团队称 ...

  • 基于 Flutter 的 Web 渲染引擎「北海」正式开源

    今天 以下文章来源于淘系前端团队 ,作者淘系-染陌 淘系前端团队前端的世界一直在变化着,在各种熟悉的语言进化中迅速的化学反应.也许你和我们一样,对前端的理解也在不断刷新.欢迎你和我们一起,在淘宝这个丰 ...

  • 【老孟Flutter】为什么 build 方法放在 State 中而不是在 StatefulWidget 中

    老孟导读:此篇文章是生命周期相关文章的番外篇,在查看源码的过程中发现了这一有趣的问题,欢迎大家一起探讨. Flutter 中Stateful 组件的生命周期:http://laomengit.com/ ...

  • Flutter VS RN,谁更适合做跨平台开发?

    跨平台技术解决方案一直是业内热议的话题,无论是当前热门的跨平台技术方案RecatNative还是目前使用依然广泛的webview,又或是Google这两年在大力推广的Flutter,究竟哪种方案更适合 ...

  • 浅谈Flutter入门知识

    Flutter是Google的移动UI框架,可以在iOS和Android上快速构建高质量的本地用户界面.一个代码可以同时生成两个高性能.高保真的iOS和Android应用.Flutter的目标是让开发 ...

  • 左手 VM,右手 Container Serverless,达达智能弹性伸缩架构和实践

    李忠良 InfoQ 嘉宾|杨森 编辑|李忠良 面对节假日常规促销.618/ 双 11 购物节等配送业务订单量的暴增,达达集团通过智能弹性伸缩架构和精细化的容量管理,有效地做到了业务系统对配送全链路履约 ...