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), // 內(nèi)邊距
margin: EdgeInsets.all(10), // 外邊距
decoration: BoxDecoration( // 設(shè)置這個(gè)就不能直接設(shè)置上面的那個(gè)顏色，不然不起效
gradient: LinearGradient( // 線性漸變
colors: [Colors.red,Colors.blue,Colors.orange] // 多個(gè)顏色
),
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
是我學(xué)習(xí)的第二個(gè)組件，記錄一下吧
alignment 對(duì)齊方式
這里要注意的就是喘蟆，這個(gè)對(duì)齊方式指的是Container 里的對(duì)其方式
例：alignment: Alignment.topLeft
topLeft 左上
topCenter 中上
topRight 右上
centerLeft 左中
center 中間
centerRight 右中
bottomLeft 左下
bottomCenter 下中
bottomRight 右下
width - height 寬 - 高
例：
width: 500, // 寬度
height: 400, // 高度
padding 內(nèi)邊距
這個(gè)也是指的是Container 里的
例1：
padding: EdgeInsets.fromLTRB(10, 50, 0, 0), // 內(nèi)邊距 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 陰影敷燎，這個(gè)有點(diǎn)煩，記不住
例：
decoration: BoxDecoration( // 設(shè)置這個(gè)就不能直接設(shè)置顏色箩言，不然不起效
gradient: LinearGradient( // 線性漸變
colors: [Colors.red,Colors.blue,Colors.orange] // 多個(gè)顏色
),
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))], // 陰影
),
