Text和Container組件
- 一、先建立一個主頁面
- 二、首先可以看到Center組件中的子組件Container
- 三、Container子組件對應的內容是今天的另一個細節Text組件
- 四、Text組件和Container組件
一、先建立一個主頁面
1.首先輸入fim，就會自動跳出第一段參考，
2.然后在主函式中runApp(MyApp());
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
3.定義好MyApp的內容
回傳的是MaterialApp組件的home和body元素，Home利用Scaffold元素中的appBar定義上劃欄的組件，Body里面就是一個新的定義組件，
//自定義組件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter demo')),
body: HomeContent(),
));
throw UnimplementedError();
}
}
4.運行結果如下：
今天需要學習的Text組件和Container組件都放在新組件HomeContent中，以后對內容的修改最后都這么做，
二、首先可以看到Center組件中的子組件Container
Container中包括了子組件、height、width、以及decoration組件，分別設定了容器的內容、高度、寬度以及裝飾，裝飾包括color和border，裝飾了容器的背景色為藍色，邊框的顏色為黃色寬度為2.0.
三、Container子組件對應的內容是今天的另一個細節Text組件
下面設定了文本內容、textAlign和style，textAlign設定了文章居中顯示，Style設定了文字的大小和間距，
HomeContent全部代碼如下
//將center組件重新封裝在HomeContent中
class HomeContent extends StatelessWidget {
get yellow => null;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Text('我是一個文本',
textAlign: TextAlign.center,//文本顯示位置
//overflow: TextOverflow.ellipsis,溢位就是幾個點，如果不做溢位設定，就會自動換行
style: TextStyle(
fontSize: 16.0,
letterSpacing: 5.0,//間距
)//字體大小顯示
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.yellow,
width: 2.0,
) /*邊框的顏色*/
)));
throw UnimplementedError();
}
}
運行結果如下
四、Text組件和Container組件
1.TextWidget常用屬性
| 名稱 | 功能 |
|---|---|
| textAlign（TextAlign） | 文本對齊（center居中，left左對齊，right右對齊，justfy兩端對齊） |
| textDirection（TextDirection） | 文本方向（ltr從左到右，rlt從右到左） |
| maxLines（init） | 文本顯示的最大行數 |
| overflow（TextOverflow） | 控制文本的溢位效果（clip剪裁，fade漸隱，ellipsis省略號） |
| TextScaleFactor | 字體顯示倍率 |
| style（TextStyle） | 文字樣式設計 |
TextStyle文字樣式設計，主要有
| 名稱 | 功能 |
|---|---|
| fontSize(double） | 字體大小 |
| color(Color,Colors) | 字體顏色 |
| fontWeight(FontWeight) | 加粗（bold粗體） |
| fontStyle（FontStyle） | 字體樣式（italic斜體，normal正常體） |
| decoration(TextDecoration) | 文字裝飾（none沒有線，lineThrough洗掉線，overline上劃線，underline下劃線） |
| decorationColor(Color,Colors) | 文字裝飾的顏色 |
| decorationStyle(TextDecorationStyle) | 文字裝飾線條型別（[dashed,dotted]虛線，double兩根線，solid一根線，wavy波浪線） |
| decorationThickness(double) | 文字裝飾線條寬度 |
| letterSpacing() | 字間距（英文指每個字母之間，如果為負值字母更緊湊，中文指每個字體之間） |
| backgroundColor(Color,Colors) | 字體背景顏色 |
| wordSpacing | 字體間距離（英文指每個單詞間） |
| textBaseline | 基線 |
| shadows | 繪制文字陰影 |
| fontFamily | 文字字體"Rock Salt" |
| height | 好像是設定line-height的 |
2.Container組件
| 名稱 | 功能 |
|---|---|
| child | |
| height(double) | 高度 |
| width | 寬度 |
| padding(EdgeInsets) | 內邊距 fromLTRB(左，上，右，下) |
| margin | 同padding |
| alignment(Alignment) | child在容器中的對齊方式 |
transform(Matrix4) | 影片 translationValues rotationZ
decoration(BoxDecoration) | 背景顏色，邊框，圓角
decoration樣式，主要有
| 名稱 | 功能 |
|---|---|
| color(Color, Colors) | 背景顏色 |
| border(Border) | Border.all同時設定四條邊框， Border設定單邊框 |
| borderRadius | 圓角 |
總結內容來自于
鏈接: 組件匯總 · flutter · 看云 (kancloud.cn).
如果記不住對應的用法，只要將滑鼠放在對應的方法上即可查看，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/413506.html
標籤：其他