Flutter基础学习 3&4-19 Container容器组件的使用

最新推荐文章于 2023-06-06 08:00:00 发布

一醉南柯

最新推荐文章于 2023-06-06 08:00:00 发布

阅读量538

点赞数 1

分类专栏： # Flutter基础文章标签： Container Flutter

本文链接：https://blog.csdn.net/dpl12/article/details/90707359

版权

Flutter基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本篇主要介绍Flutter中Container容器组件的使用.........

Container容器组件介绍：

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的<div>标签。用来放置widget的容器，有padding、margin、位置、大小等参数。
具体有以下参数：

alignment ：对齐方式 Alignment
padding：内边距 EdgeInsets
margin：外边距 EdgeInsets
color：
decoration：
foregroundDecoration:
width: 包含padding
height:包含padding
constraints：BoxConstraints：
transform：
child：子view，可以为空，就是一个空view

话不多数，Demo代码如下：

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //body:当前界面所显示的主要内容
          body: Center(
            //Container（容器控件）,相当于HTML里的<div>标签
            child: Container(
              child: new Text('Hello Fultter',style: TextStyle(fontSize: 40.0,color: Colors.white)),
              //alignment这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。
              alignment: Alignment.topLeft,
              width: 500.0,
              height: 400.0,
              //color: Colors.lightBlue,
              //padding的属性就是一个内边距,指的是Container边缘和child内容的距离
              padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 0.0),
              //const:常量
              margin: const EdgeInsets.all(10.0),
              //margin是外边距，只的是container和外部元素的距离
              //decoration是 container 的修饰器，主要的功能是设置背景和边框。
              //颜色渐变，这时候需要使用BoxDecoration这个类
              decoration: new BoxDecoration(
                //gradient：渐变
                gradient: const LinearGradient(  //LinearGradient：线性渐变
                  colors: [Colors.lightBlue,Colors.purple,Colors.greenAccent]
                ),
                border: Border.all(width: 5.0,color: Colors.red),//边框设置
              ),
            ),
          ),
       ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

需要注意知识点：

1、Alignment属性

其实容器的作用就是方便我们进行布局的，Flutter这点也作的很好，我们先来看容器属性中的Alignment。

这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。

先作一个效果：建立一个容器，然后容器内加入一段文字Hello Flutter, 并让它据顶左端对齐。

当然它的对齐方式还有如下几种：

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

2、width和height设置宽、高和颜色属性

设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是500，高是400，颜色为亮蓝色。

3、padding属性

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

EdgeInsets.fromLTRB(10,10,10,10) ，L表示左边距（left缩写），T表示上边距（top缩写），R表示右边距（right缩写），B表示底边距（bottom缩写），四个值可以分开写；
EdgeInsets.all（10），上下左右边距均为10；
EdgeInsets.only(left: 10, right: 5, top: 10, bottom: 10)，可分别指定4个方向的边距值，如果只需要上边距，可以写成EdgeInsets.only( top: 10)；
EdgeInsets.symmetric(vertical: 20, horizontal: 10) ，可以指定垂直和水平方向的边距，也可以单独指定垂直或者水平方向的边距。如只需要垂直方向的边距，可写成EdgeInsets.symmetric(vertical: 20)；
EdgeInsets.fromWindowPadding()，创建与给定窗口填充匹配的insets。具体的用法目前还不知道,第一个参数是给定的widget的windowpadding，第二个是屏幕的分辨率；

4、margin属性

会了padding属性的设置，margin就变的非常容易了，因为方法基本上一样。不过margin是外边距，只的是container和外部元素的距离。现在要把container的外边距设置为10个单位。用法和padding属性相同。

5、decoration属性

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

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

this.color,// 颜色，如果这个颜色指定了，最外层的颜色就不能用了，否则会报错，二者不可兼容。
this.image,// 背景图片
this.border,// 边框
this.borderRadius,// 边框圆角
this.boxShadow,// 阴影
this.gradient,// 渐变，在图片之下展示，如果指定了渐变色，color属性就没用了
this.backgroundBlendMode, // 混合模式应用于框的[颜色]或[渐变]背景,如果没有颜色或者渐变色，这个属性就没有效果
this.shape = BoxShape.rectangle,// 这个有两个值，一个是方形，一个是圆形（circle），
        BoxShape.rectangle和RoundedRectangleBorder是一样的，CircleBorder和BoxShape.circle是一 
        样的效果，但是Container的shape只能用BoxShape.rectangle、BoxShape.circle是这两种，
        而RoundedRectangleBorder、CircleBorder目前是用在Material上的，
        因为Container的shape是继承自 BoxBorder的，而Material的shape是继承自ShapeBorder，
        虽然BoxBorder也是继承ShapeBorder的

5.1 shape 外观样式，BoxShape.circle圆形图案，BoxShape.rectangle方形图案；
5.2 borderRadius 边框半径，有以下几种写法：

new BorderRadius.all(Radius.circular(4)) // 四个圆角都是半径为4
new BorderRadius.circular(4), // 四个圆角都是半径为4,和上面的效果是一样的
new BorderRadius.horizontal( left: Radius.circular(10)), //左边的两个角的半径为10 
new BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(4)),//左边的两个角半径为10，右侧两个角半径为4
new BorderRadius.vertical( top: Radius.circular(6)), //上边两个角半径为6
new BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(4),
                      bottomLeft: Radius.circular(6),
                      bottomRight: Radius.circular(20)
                     ), //坐上角半径为10，右上角4，左下角为6，右下角为20

5.3 boxShadow 阴影，阴影是BoxShadow的数组：其中阴影有4个参数；

BoxShadow(
                    color: Colors.green, //阴影的颜色
                    offset: Offset(50, 100), //偏移量，Offset第一个参数为x轴的偏移量，正值向右，负值向左，第二个参数是y轴的偏移量，正值向下，负值向上
                    blurRadius: 20, //这个是高斯模糊的半径，半径越大阴影越模糊，半径越小阴影越清晰
                    spreadRadius: 10) //这个扩散的半径，半径越大阴影面积越大，值越小阴影面积越小

运行截图：