Flutter学习笔记--Container容器介绍

Flutter学习笔记–Container容器介绍：
接着上篇的Text介绍今天学习了下Container

首先补充个小知识，上次的笔记中使用bat的方式打开模拟器实在太笨了，vsCode里带了打开模拟器的方法，在页面的右下角看到No Device ：

点击No Device后在页面上方会弹出选择模拟器的框框，选择你已经安装的模拟器就好了：
开始我们的Container：
Container的直译为容器，其在实际的使用中也可按字义解读，定义了界面内部的容器属性。
Container在Flutter中太常见了。官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
在child中引用Container：
alignment：Alignment.topRight设置文字对齐方式顶部右对齐；
设置高宽：height/width：500.0，400；
padding：设置内边距 const EdgeInsets.fromLTRB(10,20,50,30),LTRB为左上右下；
margin: const EdgeInsets.all(15)设置外边距
然后结合decoration设置装饰风格：gradient:const LinearGradient(//线性渐变 colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]使用数组存放从左到右的颜色
详细代码如下：

import 'package:flutter/material.dart';    //引入flutter包
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{  //extends 后面为继承的方法
@override//重构（将上面的方法重新写一下）
Widget build(BuildContext context){
return MaterialApp
(
  title:'Welcome to flutter',
  home: Scaffold//home代表app的主体，有了Scaffod我们才可以搭建下面的内容
  (
    appBar: AppBar//类似表头的app头部
    (
    title: Text('Welcome to to Flutter')
    ),
    body:Center //Center为布局用的以中心方式开始布局
    (
      child: Container
      (
        child: new Text('Hello woshi小开心',style:TextStyle(fontSize: 40.0)),
        alignment: Alignment.topRight,
        height: 500.0,
        width: 400.0,
        //color: Colors.lightBlue,
        //padding: const EdgeInsets.all(10.0),//边距设置。all 为上下左右边距都为：
        padding: const EdgeInsets.fromLTRB(20, 10, 30, 15),//左上右下分别设置
        margin: const EdgeInsets.all(15),//外边距
        decoration: new BoxDecoration(   //装饰风格=>新建装饰盒
         // image:new DecorationImage(image: new NetworkImage('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%A4%A7%E6%B5%B7&step_word=&hs=0&pn=14&spn=0&di=100870&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=1481537120%2C3843810019&os=3818779189%2C3519848404&simid=4280167612%2C709398789&adpicid=0&lpn=0&ln=1862&fr=&fmq=1597366559926_R&fm=result&ic=&s=undefined&hd=&latest=&copyright=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F93%2Fac69c5f0db0033d02e34d998e01d7a28.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Flafij3t_z%26e3Bv54AzdH3Ff7vwtAzdH3Flmda8m_z%26e3Bip4s&gsm=f&rpstart=0&rpnum=0&islist=&querylist=&force=undefined'),),//这里的一大串是我调用了网络图片做背景，可以注释掉
          gradient:const LinearGradient(//线性渐变
             colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]//用数组来存放颜色设置
          ),

        ),
      ),
    ),
  ),
);

}
}

Flutter学习笔记--Container容器介绍

猜你喜欢