官方Demo -基礎Widget

基礎Widget

一 Widget基礎簡介

TODO：這一part後面再細解

二 文本、字體樣式

2.1 文本

常見屬性：

• textAlign

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center (
            child: Text("Hello World",
              textAlign: TextAlign.center,
            ), // 下面的代碼都是替換該位置
        ),
      ),
    );
  }
}

• maxLines
• overflow

Text("Hello World!!! I'm Yangchengfeng" *4,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
),

• textScaleFactor

Text("Hello World!!!",
    textScaleFactor: 2.0,
),

• TextStyle

Text("Hello World!!!",
    style: TextStyle(
      color: Colors.blue,
      fontSize: 19.0,
      height: 1.2,
      fontFamily: "Courier",
      background: new Paint()..color=Colors.yellow,
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.dashed
    ),
),

• TextSpan：表示文本的一個片段

Text.rich(TextSpan(
    children: [
       TextSpan(
         text: "link："
       ),
       TextSpan(
         text: "http://www.baidu.com",
         style: TextStyle(
           color: Colors.blue
         )
       )
   ]
))

• DefaultTextStyle

DefaultTextStyle(
    style: TextStyle(
       color:Colors.red,
       fontSize: 20.0,
     ),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
         Text("hello world"),
         Text("I am Jack"),
         Text("I am Jack",
           style: TextStyle(
               inherit: false, //2.不繼承默認樣式
               color: Colors.grey
           ),
         ),
       ],
     ),
 ),

2.2 文本

三 按鈕

• RaisedButton：水波紋，默認帶有陰影和灰色背景。按下後，陰影會變大

RaisedButton(
     child: Text("Normal"),
     onPressed: ()=>{},
)

• FlatButton：默認背景透明並不帶陰影。按下後，會有背景色

FlatButton(
    child: Text("Normal"),
    onPressed: ()=>{},
)

• OutlineButton：默認有一個邊框，不帶陰影且背景透明。按下後，邊框顏色會變亮、同時出現背景和陰影(較弱)

OutlineButton(
      child: Text("Normal"),
       onPressed: ()=>{},
)

• IconButton：一個可點擊的Icon，不包括文字，默認沒有背景，點擊後會出現背景

IconButton(
    icon: Icon(Icons.thumb_up),
     onPressed: ()=>{},
)

• 自定義Btn

RaisedButton(
   color: Colors.blue,
    highlightColor: Colors.blue[700],
    colorBrightness: Brightness.dark,
    splashColor: Colors.grey,
    child: Text("Submit"),
    shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
    onPressed: () => {},
)

四 圖片和Icon

圖片資源可以來自：asset、文件、內存以及網絡

1、asset

• 在工程根目錄下創建一個images目錄，並將圖片拷貝到該目錄
• 在pubspec.yml中的flutter部分添加如下內容

flutter:
  assets:
    - images/intro.png

• Image.asset從asset中加載、顯示圖片

Image.asset("images/intro.png",
   width:200
)

2、文件
3、內存
4、網絡

 Image.network("http://goss4.vcg.com/creative/vcg/800/new/VCG211177466612.jpg",
     width: 300,
)

• TODO圖片緩存

五 單選開關和複選框

5.1 Switch

• 只能定義寬度，高度也是固定的

5.2 Checkbox

• 大小是固定的，無法自定義

六 輸入框及表單、富文本

6.1 輸入框

裝飾構造器：InputDecoration

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('輸入框'),
        ),
        body: Column(
          children: <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                labelText: "用戶名",
                hintText: "用戶名或郵箱",
                prefixIcon: Icon(Icons.person)
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: "密碼",
                hintText: "您的登錄密碼",
                prefixIcon: Icon(Icons.lock)
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2、獲取輸入內容(兩種方法)

6.2 表單

6.3 富文本

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RichText(
          text: TextSpan(
            text: 'This is ',
            style: TextStyle(color: Colors.black, fontSize: 36.0),
            children: <TextSpan>[
              TextSpan(
                  text: 'bold ',
                  style: TextStyle(fontWeight: FontWeight.bold, )
              ),
              TextSpan(
                  text: 'text. '
              ),
              TextSpan(
                text: 'This is ',),
              TextSpan(
                  text: 'larger ',
                  style:
                  TextStyle(fontSize: 22.0)),
              TextSpan(
                text: 'font size.',),
              TextSpan(
                text: 'This is ',),
              TextSpan(
                  text: 'red ',
                  style:
                  TextStyle(color: Colors.red)),
              TextSpan(
                text: 'color.',),
            ],
          ),
        ),
      ),
    );
  }
}

• 字節跳動開源的 Flutter 富文本展示效果

【More】

• 基於TextField實現頂部searchBar

想了解更多屬性，點擊官網章節傳送門