Flutter Container、Text 容器組件
Flutter 基礎組件 Container、Text 容器組件詳情使用介紹
Flutter Text 組件介紹
代碼案例演示：
Text(
'Flutter 基礎項目 飛翔的喵喵',
textDirection: TextDirection.ltr,
style: TextStyle( // 文本樣式
color: Colors.indigo,
fontSize: 30,
fontWeight: FontWeight.w100, // 文字粗細
fontStyle: FontStyle.italic, // 文字樣式
decoration: TextDecoration.lineThrough, // 文字下劃線
decorationStyle: TextDecorationStyle.dotted, // 下劃線樣式
decorationColor: Colors.cyan
),
textAlign: TextAlign.center, // 文本水平對齊方式
overflow: TextOverflow.ellipsis, // 超出 用 … 表示
maxLines: 2, // 最大行數
textScaleFactor: 1, // 字體放大倍數
),
TextAlign 屬性
TextAlign 屬性就是文本的對齊方式，它的屬性值有如下：
center: 文本以居中形式對齊,這個也算比較常用的了。left: 左對齊，經常使用，讓文本居左進行對齊，效果和start一樣。right: 右對齊，使用頻率也不算高。start: 以開始位置進行對齊，類似於左對齊。end: 以爲本結尾處進行對齊，不常用。有點類似右對齊.justfy: 兩端對齊
最常用的三個：left(左對齊)、center（居中對齊）、right（右對齊）
maxLines 屬性
設置最多顯示的行數，比如我們現在只顯示1行。代碼如下：
child:Text(
'Hello Text',
textAlign:TextAlign.left,
maxLines: 1,
)
overflow 屬性
overflow 屬性是用來設置文本溢出時，如何處理,它有下面幾個常用的值供我們選擇。
clip: 直接切斷，剩下的文字就沒有了，感覺不太友好，體驗性不好。ellipsis: 在後邊顯示省略號，體驗性較好，這個在工作中經常使用。fade: 溢出的部分會進行一個漸變消失的效果，當然是上線的漸變，不是左右的哦。
style 屬性
下面是 TextStyle 的參數 :
| 名稱 | 功能 |
|---|---|
| decoration | 文字裝飾線(none 沒有線，lineThrough 刪 除線，overline 上劃線，underline 下劃線) |
| decorationColor | 文字裝飾線顏色 |
| decorationStyle | 文字裝飾線風格([dashed,dotted]虛線， double 兩根線，solid 一根實線，wavy 波浪 線) |
| wordSpacing | 單詞間隙(如果是負值，會讓單詞變得更緊湊 |
| letterSpacing | 字母間隙(如果是負值，會讓字母變得更緊 湊) |
| fontStyle | 文字樣式(italic 斜體，normal 正常體) |
| fontSize | 文字大小 |
| color | 文字顏色 |
| fontWeight | 字體粗細(bold 粗體，normal 正常體) |
Flutter Container 組件介紹
Container（容器控件）在Flutter是經常使用的控件，它就相當於HTML裏的<div>標籤，每個頁面或者說每個視圖都離不開它。
代碼案例演示：
Container(
child: Text('hello text'),
height: 300.0,
width: 300.0,
decoration: BoxDecoration( // 裝飾器
color: Colors.orangeAccent, // 深橘黃
border: Border.all(
color: Colors.tealAccent, // 邊框藍綠色
width: 2.0
),
borderRadius: BorderRadius.all( Radius.circular(20) ), // 盒子圓角
),
padding: EdgeInsets.all(20), // 盒子內邊距
//padding: EdgeInsets.fromLTRB(left, top, right, bottom) // 更加詳細的內邊距
// transform: Matrix4.translationValues(x, y, z), // transform translate 轉換
// transform: Matrix4.translationValues(0, -20, 0),
// transform: Matrix4.rotationZ(50), // 旋轉
// transform: Matrix4.diagonal3Values(1.8, 1, 1), // x, y, z 縮放
alignment: Alignment.bottomLeft, // 文字垂直對齊方式
)
alignment 屬性
其實容器的作用就是方便我們進行佈局的，Flutter這點也作的很好，我們先來看容器屬性中的Alignment。
這個屬性針對的是Container內child的對齊方式，也就是容器子內容的對齊方式，並不是容器本身的對齊方式。
詳細屬性值羅列：
topCenter:頂部居中對齊
topLeft:頂部左對齊
topRight:頂部右對齊
center:水平垂直居中對齊
centerLeft:垂直居中水平居左對齊
centerRight:垂直居中水平居右對齊
bottomCenter 底部居中對齊
bottomLeft:底部居左對齊
bottomRight:底部居右對齊
設置寬、高和顏色屬性
設置寬、高和顏色屬性是相對容易的，只要在屬性名稱後面加入浮點型數字就可以了， 示例代碼如下：
child:Container(
child:new Text('Hello,style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
width:200.0,
height:40.0,
color: Colors.lightBlue,
),
padding 屬性
padding的屬性就是一個內邊距，它和你使用的前端技術CSS裏的padding表現形式一樣，指的是Container邊緣和child內容的距離。設置內邊距爲10的示例代碼如下：
child:Container(
child:new Text('Hello',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:200.0,
height:40.0,
color: Colors.lightBlue,
padding: EdgeInsets.all(10.0),
),
// padding: EdgeInsets.fromLTRB(left, top, right, bottom) // 更加詳細的內邊距
margin 屬性
margin是外邊距，只的是container和外部元素的距離。
方法同padding使用相同
margin:const EdgeInsets.all(10.0),
margin:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),//上外邊距爲30，左外邊距爲10
decoration 屬性
decoration 是 container 的修飾器，主要的功能是設置背景和邊框。
比如你需要給背景加入一個漸變，這時候需要使用BoxDecoration這個類，代碼如下（需要注意的是如果你設置了decoration，就不要再設置color屬性了，因爲這樣會衝突）。
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:200.0,
height:40.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
)
),
),
設置邊框
設置邊框可以在decoration裏設置border屬性，比如你現在要設置一個紅色邊框，寬度爲2。代碼如下：
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
設置圓角，圓形等外框：
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width: 2.0
),
borderRadius: BorderRadius.all(
// Radius.circular(150), //圓形
Radius.circular(10),
)
),
transform 屬性
讓 Container 容易進行一些旋轉之類的
// transform:Matrix4.translationValues(100,0,0)
// transform:Matrix4.rotationZ(0.3)
transform:Matrix4.diagonal3Values(1.2, 1, 1)
最終案例代碼及展示效果
import 'package:flutter/material.dart';
void main(){
runApp(
myApp()
);
}
// 自定義組件
class myApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("大喵課堂"), // 頂部導航欄
),
body: HomeCOntent(), // 中間主題內容
),
theme: ThemeData(
primarySwatch: Colors.pink // 粉色系主題
)
);
}
}
// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Text(
'Flutter 基礎項目 飛翔的喵喵',
textDirection: TextDirection.ltr,
style: TextStyle( // 文本樣式
color: Colors.indigo,
fontSize: 30,
fontWeight: FontWeight.w100, // 文字粗細
fontStyle: FontStyle.italic, // 文字樣式
decoration: TextDecoration.lineThrough, // 文字下劃線
decorationStyle: TextDecorationStyle.dotted, // 下劃線樣式
decorationColor: Colors.cyan
),
textAlign: TextAlign.center, // 文本水平對齊方式
overflow: TextOverflow.ellipsis, // 超出 用 … 表示
maxLines: 2, // 最大行數
textScaleFactor: 1, // 字體放大倍數
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration( // 裝飾器
color: Colors.orangeAccent, // 深橘黃
border: Border.all(
color: Colors.tealAccent, // 邊框藍綠色
width: 2.0
),
borderRadius: BorderRadius.all( Radius.circular(20) ), // 盒子圓角
),
padding: EdgeInsets.all(20), // 盒子內邊距
//padding: EdgeInsets.fromLTRB(left, top, right, bottom) // 更加詳細的內邊距
// transform: Matrix4.translationValues(x, y, z), // transform translate 轉換
// transform: Matrix4.translationValues(0, -20, 0),
// transform: Matrix4.rotationZ(50), // 旋轉
// transform: Matrix4.diagonal3Values(1.8, 1, 1), // x, y, z 縮放
alignment: Alignment.bottomLeft, // 文字垂直對齊方式
)
);
}
}
最終展示效果：
