Container容器组件的使用

栏目: IOS · Android · 发布时间: 5年前

内容简介：Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的div标签，每个页面或者说每个视图都离不开它代码padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的div标签，每个页面或者说每个视图都离不开它

Alignment属性

  • bottomCenter:下部居中对齐。
  • botomLeft: 下部左对齐。
  • bottomRight：下部右对齐。
  • center：纵横双向居中对齐。
  • centerLeft：纵向居中横向居左对齐。
  • centerRight：纵向居中横向居右对齐。
  • topLeft：顶部左侧对齐。
  • topCenter：顶部居中对齐。
  • topRight： 顶部居左对齐。

代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}
复制代码

padding属性

padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。

padding简易书写方式

padding: const EdgeInsets.all(20),
复制代码

EdgeInsets.all(20)很多情况并不满足我们的需求，所以：

padding: const EdgeInsets.fromLTRB(10,30,20,20),
复制代码

我们用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB分别代表左、上、右、下

margin属性

margin是外边距，只的是container和外部元素的距离。

现在要把container的外边距设置为10个单位，代码如下:

margin: const EdgeInsets.all(10.0),
复制代码

margin 同样拥有自定义的能力：

margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0)
复制代码

decoration属性

decoration是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）。

child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10,30,20,20),
            margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              )
            ),
          ),
复制代码

注意：一定要去掉color属性

border 边框

设置边框可以在decoration里设置border属性，比如你现在要设置一个红色边框，宽度为5。代码如下：

child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            padding: const EdgeInsets.fromLTRB(10,30,20,20),
            margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            ),
          ),
复制代码

主要代码是:

border:Border.all(width:5.0,color:Colors.red)
复制代码

Image图片组件的使用

在程序中图片必不可少，接下来学习一下图片的使用:

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp (
      title: 'Text Widget',
      home: Scaffold(
        body:Center(
          child:Container(
            child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
               scale:1.0
            ),
            width:300.0,
            height:200.0,
            color:Colors.lightBlue
          ),
        ),
      ),
    );
  }
}
复制代码

加入图片的几种方式

  • Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
  • Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
  • Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
  • Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多，所以没什么发言权。

fit属性的设置

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，我们先来看看这些属性（建议此部分组好看视频理解）。

  • BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
  • BoxFit.contain:全图显示，显示原比例，可能会有空隙。
  • BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
  • BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
child:Container(
            child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
               fit: BoxFit.fill,
            ),
            width:300.0,
            height:200.0,
            color:Colors.lightBlue
          ),
复制代码

图片的混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。在这里作几个简单的例子，让大家看一下效果，剩下的留给小伙伴自己探索

child:new Image.network(
  'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
    width: 100,
    height: 100,
),
复制代码

color：是要混合的颜色，如果你只设置color是没有意义的。 colorBlendMode:是混合模式，相当于我们如何混合。

repeat图片重复

基本使用代码：

child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
              repeat: ImageRepeat.repeatY,
              width: 100,
              height: 100,
            ),
复制代码
  • ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布
  • ImageRepeat.repeatX: 横向重复，纵向不重复
  • ImageRepeat.repeatY：纵向重复，横向不重复
  • ImageRepeat.noRepeat:单图显示，不重复

还有非常多炫酷的效果大家可以自己尝试

ListView 列表组件简介

列表组件的知识其实是很多的，也是一个经常使用的组件，这节我们先学习最简单的列表组件如何制作。

话不多说线上代码，代码如下：

import 'package:flutter/material.dart';

void main () => runApp(MyApp());
///纵向列表
class MyApp extends StatelessWidget {
  @override 
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'LXS Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('listView Widget'),
        ),
        // body: new Text('ListView Widget'),
        body: new ListView(
          children: <Widget>[
          //  new ListTile (
          //    leading:new Icon(Icons.access_time),
          //    title: new Text('access_time')
          //  ),
          //  new ListTile (
          //    leading:new Icon(Icons.accessibility),
          //    title: new Text('accessibility')
          //  ), 
          //  new ListTile (
          //    leading:new Icon(Icons.add_a_photo),
          //    title: new Text('add_a_photo')
          //  ),  
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatX,
              // height:100.0,

            ),
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatY,
              //  height:200.0,
              ),
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatY,
              // height:300.0,
              ),
          ],
        ),
        // backgroundColor: Colors.blue,
      ),
    );
  }
}
复制代码

制作横向列表

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp (
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200.0,
            child: MyList(),
          ),
        ),
      ),
    );
  }
}

class MyList extends StatelessWidget {
  @override 
  Widget build (BuildContext context) {
    return ListView (
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}
复制代码

横向列表和竖向列表最大的不同在于：

scrollDirection

  • Axis.vertical：默认值，竖向排列
  • Axis.horizontal：水平排列

其次 MyList 做了一个简单地代码分离，代码可读性更高

动态列表

动态列表顾名思义，数据不是写死的也是我们在实际项目中常用的，比如我们的数据从后台读取过来，然后存入一个变量数组里，然后以数组的内容循环出一个列表,先上代码在解释：

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(1000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget {

  final List<String> items;

  MyApp({Key key,@required this.items}): super(key : key);

  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}
复制代码

首先我们先介绍数据的来源（当然我这的数据也是假的）:

void main() => runApp(MyApp(
  items:new List<String>.generate(1000, (i)=>"Item $i")
));
复制代码

List类型的使用:

  • var myList = List(): 非固定长度的声明。
  • var myList = List(2): 固定长度的声明。
  • var myList= List():固定类型的声明方式。
  • var myList = [1,2,3]: 对List直接赋值。

我们使用的事List传递，然后直接用List方法中的generate产生List中的元素，最后产生一个带值的List数组

说明:再main函数的runApp中调用了MyApp类，再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值

generate方法传递两个参数，第一个参数是生成的个数，第二个是方法

参数传递完成，接下来我们看看怎么接收的：

接收参数

///final:只能被设一次值，在声明处赋值，值和普通变量的设值一样，可以是对象、字符串、数字等，用于修饰值的表达式不变的变量  
  ///const：只能被设一次值，在声明处赋值，且值必须为编译时常量；用于修饰常量。
  final List<String> items;
  
  MyApp({Key key,@required this.items}): super(key : key);
复制代码

MyApp(...)是一个构造函数,除了Key，我们增加了一个必传参数，这里的@required意思就必传。:super如果父类没有无名无参数的默认构造函数，则子类必须手动调用一个父类构造函数。

我们就可以接收一个传递过来的参数了，当然我们要事先进行声明

动态列表 ListView.builder()

body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
复制代码

必填参数：

  • itemCount：列表行数
  • itemBuilder：内容绘制

当然还有很多可用参数：

  • scrollDirection：滚动方向
  • reverse:是否倒序

等等还有很多，等待大家使用，我这就不多介绍了


以上所述就是小编给大家介绍的《Container容器组件的使用》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
游戏编程中的人工智能技术

游戏编程中的人工智能技术

布克兰德 / 吴祖增 / 清华大学出版社 / 2006-5 / 39.0

《游戏编程中的人工智能技术》是人工智能游戏编程的一本指南性读物，介绍在游戏开发中怎样应用遗传算法和人工神经网络来创建电脑游戏中所需要的人工智能。书中包含了许多实用例子，所有例子的完整源码和可执行程序都能在随书附带的光盘上找到。光盘中还有不少其他方面的游戏开发资料和一个赛车游戏演示软件。 《游戏编程中的人工智能技术》适合遗传算法和人工神经网络等人工智能技术的各行业人员，特别是要实际动手做应用开......一起来看看 《游戏编程中的人工智能技术》 这本书的介绍吧!

码农工具
XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3