Flutter 組件之Widget、Center、Text、MaterialApp、Scaffold 常用屬性總結

初識flutter結構

flutter 項目結構

入口文件

//flutter 基礎包導入
import 'package:flutter/material.dart';
//這裏HomePage() 需要實例化使用,這裏可以省略new （new HomePage()）
void main() {
  runApp(HomePage());
}

Widget 基礎組件MaterialApp、Scaffold

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(//頂層Widget類似於html標籤
      home: Scaffold(//佈局結構的基本結構包含appBar、body、drawer（抽屜菜單） ...
        appBar: AppBar(//導航結構
          title: Text("我是頭部的內容"),
        ),
        body: PageComponets(),//內容主結構組件
      ),
    );
  }
}

Text、Container組件常用屬性

import 'package:flutter/material.dart';

class PageComponets extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(//居中顯示
      child: Container(//類似於div
        child: Text(//文字組件
          "測試",
          textAlign: TextAlign.justify,//文本對齊方式
          textDirection: TextDirection.ltr,//文本顯示方式left to right
          textScaleFactor: 1.0,//文字顯示倍率放大縮小
          overflow: TextOverflow.ellipsis,//css同樣overflow超過部分處理方式
          maxLines: 1,//字體最大顯示行數,
          style: TextStyle(//文字樣式
            fontSize: 20.0,//字體大小
            color: Colors.blueGrey,//字體顏色
            fontWeight: FontWeight.bold,//字重
            decoration: TextDecoration.lineThrough,//刪除線 文字裝飾線
            decorationStyle: TextDecorationStyle.dashed,//虛線
            decorationColor: Color.fromARGB(1, 111, 222, 122),//文字裝飾線顏色同css
            letterSpacing: 20.2,//字母間隙,同css
            fontStyle:FontStyle.normal,//字體 italic斜體正常體
            
          ),
        ),
        width: 500.0,//盒子的寬
        height: 400.0,//盒子的高
        padding: EdgeInsets.fromLTRB(0, 20, 30, 20),//內邊距左上右下
        margin: EdgeInsets.all(20),//外邊距全部
        transform: Matrix4.translationValues(0, -200, 30),//同css 傾斜位移旋轉
        alignment: Alignment.topCenter,//文字居於盒子上 中 部位
        decoration: BoxDecoration(//盒子屬性
            color: Colors.orange,//背景顏色
            border: Border.all(//邊框顏色寬度
              color: Colors.pink,
              width: 3.4,
            ),
            borderRadius: BorderRadius.all(Radius.circular(11))),//盒子圓角
      ),
    );
  }
}