Flutter - Container Wigdet（2）

Screenshot_1589038040.png

import 'package:flutter/material.dart';

void main () {
  runApp(myApp()); // 主入口
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:'Container Widget', 
      // 脚手架
      home:Scaffold( 
        body:Center(
          child: Container(
            child: Text('hello xzp! Container', style: TextStyle(
              fontSize: 22.5,
              color: Colors.white),
              textAlign: TextAlign.center),

            // color: Colors.lightBlue, 
            alignment: Alignment.topLeft, // 位置
            width: 500,  // 宽度
            height: 400, // 高度
            padding: EdgeInsets.fromLTRB(10, 50, 0, 0), // 内边距
            margin: EdgeInsets.all(10), // 外边距
            decoration: BoxDecoration( // 设置这个就不能直接设置上面的那个颜色，不然不起效
              gradient: LinearGradient( // 线性渐变
                colors: [Colors.red,Colors.blue,Colors.orange] // 多个颜色 
              ),
              border: Border.all(width: 5.0,color: Colors.purple), // 边框
              borderRadius: BorderRadius.all(Radius.elliptical(50, 50)), // 圆角
              boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0), blurRadius: 10.0, spreadRadius: 2.0), 
                          BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), 
                          BoxShadow(color: Color(0xFF0000FF))],   // 阴影
            ),
          )
        )
      )
    );
  }
}

Container Wigdet

是我学习的第二个组件，记录一下吧

alignment 对齐方式

这里要注意的就是，这个对齐方式指的是Container 里的对其方式

例：alignment: Alignment.topLeft
topLeft        左上
topCenter      中上
topRight       右上
centerLeft     左中
center         中间
centerRight    右中
bottomLeft     左下
bottomCenter   下中
bottomRight    右下

width - height 宽 - 高

例：
width: 500,  // 宽度
height: 400, // 高度

padding 内边距

这个也是指的是Container 里的

例1：
padding: EdgeInsets.fromLTRB(10, 50, 0, 0), // 内边距  fromLTRB （左，上，右，下）
例2：
padding: EdgeInsets.all(10), // 四周一样

margin 外边距

例1：
margin: EdgeInsets.fromLTRB(10, 50, 0, 0), // 外边距  fromLTRB （左，上，右，下）
例2：
margin: EdgeInsets.all(10), // 四周一样

decoration 特殊处理

border 边框
borderRadius 圆角
boxShadow 阴影，这个有点烦，记不住

例：
decoration: BoxDecoration( // 设置这个就不能直接设置颜色，不然不起效
              gradient: LinearGradient(     // 线性渐变
                colors: [Colors.red,Colors.blue,Colors.orange] // 多个颜色 
              ),
              border: Border.all(width: 5.0,color: Colors.purple), // 边框
              borderRadius: BorderRadius.all(Radius.elliptical(50, 50)), // 圆角
              boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0), blurRadius: 10.0, spreadRadius: 2.0), 
                          BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), 
                          BoxShadow(color: Color(0xFF0000FF))],   // 阴影
),