Flutter筆記(三) - Flutter的基礎(chǔ)Widget

1. 文本W(wǎng)idget

1.1. 普通文本展示

在Flutter中昌阿，文本的控制參數(shù)分為兩類：

控制文本布局的參數(shù)：如文本對齊方式 textAlign两芳、文本排版方向 textDirection沛简，文本顯示最大行數(shù) maxLines、文本截?cái)嘁?guī)則 overflow 等等问顷，這些都是構(gòu)造函數(shù)中的參數(shù)九府；
控制文本樣式的參數(shù)：如字體名稱 fontFamily、字體大小 fontSize父阻、文本顏色 color愈涩、文本陰影 shadows 等等，這些參數(shù)被統(tǒng)一封裝到了構(gòu)造函數(shù)中的參數(shù) style 中加矛；

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "Hello Worf flutter \n這是Flutter文本演示第二行\(zhòng)n這是Flutter富文本演示第三行",
      textAlign: TextAlign.center, // 所有內(nèi)容都居中對齊履婉，只有文字占有的寬度達(dá)到屏幕的寬度時(shí)，才會起作用
      maxLines: 3,
      overflow: TextOverflow.ellipsis, // 超出部分顯示...
//      textScaleFactor: 1.25, 縮放
      style: TextStyle(
        fontSize: 20,
        color: Colors.purple
      ),
    );
  }
}

1.2. 富文本展示

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(text: "Hello Word", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.black)),
          TextSpan(text: "flutter", style: TextStyle(fontSize: 18, color: Colors.redAccent)),
          TextSpan(text: "\n這是Flutter富文本演示第二行;\n這是Flutter富文本演示第三行;")
        ],
      ),
      style: TextStyle(fontSize: 20, color: Colors.purple),
      textAlign:TextAlign.center,
    );
  }
}

WechatIMG39.jpeg

2. 按鈕Widget

2.1. 常規(guī)

class YZHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("基礎(chǔ)Widget")
        ),
        body: YZHomeContent(),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => print("123")
        )斟览，
// floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //浮動按鈕位置
    );
  }
}

---

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FloatingActionButton(
          child: Text("FloatingActionButton"),
          onPressed: () {
            print("FloatingActionButton Click");
          },
        ),
        RaisedButton(
          child: Text("RaisedButton"),
          onPressed: () {
            print("RaisedButton Click");
          },
        ),
        FlatButton(
          child: Text("FlatButton"),
          onPressed: () {
            print("FlatButton Click");
          },
        ),
        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        )
      ],
    );
  }
}

button.png

2.1.1. 設(shè)置按鈕的大小

給button包裹container;

 Container(
            width: double.infinity,
            height: 40,
            child: FlatButton(
              child: Text("登錄", style: TextStyle(fontSize: 20, color: Colors.white),),
              color: Colors.blue,
              onPressed: (){

              },
            ),
          ),

2.2. 自定義按鈕

默認(rèn)情況下毁腿；button上下有以一定的間距；

//自定義button 圖標(biāo)-文字-背景-圓角
        FlatButton(
            onPressed: (){},
            color: Colors.orange,
           //消除按鈕不足48時(shí)的上下間距
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
           //設(shè)置內(nèi)容包裹文字
            padding: EdgeInsets.all(0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8)
            ),
            child: Row(

              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.favorite, color: Colors.red),
                Text("點(diǎn)贊")
              ]  
            )
        )

默認(rèn)的button不能設(shè)置過小,
解決：要修改在外面包裹一下buttonTheme苛茂；

 ButtonTheme(
          minWidth: 50,
          height: 50,
          child: FlatButton(
            child: Text("FlatButton"),
            onPressed: () {
              print("FlatButton Click");
            },
          ),
        ),

3. 圖片

3.1 加載網(wǎng)絡(luò)圖片

網(wǎng)絡(luò)圖片flutter自動做了緩存已烤，最大1000張，最大100M妓羊；

class InternetImage extends StatelessWidget {
  final imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617871571&t=7b6d8e2a1b411019395f47a87f6c82b3";

  @override
  Widget build(BuildContext context) {
    return Image(
      //顏色混入
      // color: Colors.green,
      // colorBlendMode: BlendMode.colorDodge,
      image: NetworkImage(imageUrl),
      width: 200,
      height: 200,
      // fit: BoxFit.cover,
      fit: BoxFit.fitWidth,//寬度一定胯究，高度自適應(yīng)
      // repeat: ImageRepeat.repeatY,
      // alignment: Alignment.bottomCenter,//在當(dāng)前矩形框內(nèi)，位于底部中心
      //(-1 , 1)
      //最左上角（-1躁绸， -1）
      //最右下角（1裕循， 1）
      // alignment: Alignment(0, -1),
    );
  }
}

3.2. 加載本地圖片

在flutter項(xiàng)目中創(chuàng)建一個(gè)文件夾，存儲圖片涨颜；

注意：flutter中2倍圖费韭、3倍圖，是不需要添加@2x/@3x的庭瑰，但是藍(lán)湖上下載的倍圖自帶@2x/@3x星持，可參考博客：http://www.reibang.com/p/6df4663a7a14

image_flutter

在pubspec.yaml進(jìn)行配置；

assets:
    - assets/images/

注意2：assets空格敏感弹灭；

yaml_assets.png
注意3: 執(zhí)行以下命令行：flutter packages get;
- 如果Waiting for another flutter command to release the startup lock...
- 執(zhí)行: Linux killall -9 dart, Windows taskkill /F /IM dart.exe督暂；
- 或：刪除 flutter 安裝目錄下的 bin/cache/lockfile 文件揪垄；

使用圖片

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset("assets/images/image_01.png",width: 200, height: 150);
  }
}

3.2.1. 占位圖

@override
  Widget build(BuildContext context) {
    return FadeInImage(
        placeholder: AssetImage("assets/images/image_01.png"),
        image: NetworkImage(imageUrl)
    );
  }

3.3. icon

 @override
  Widget build(BuildContext context) {
    return Icon(Icons.pets);
  }

4. TextField

4.1. 基本屬性

class YZHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: "username",
              icon: Icon(Icons.people),
                hintText: "請輸入用戶名",
                border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.red[100],
            ),
          ),
        ],
      ),
    );
  }
}

WechatIMG941.jpeg

4.2. 監(jiān)聽輸入框

4.2.1 監(jiān)聽輸入

onChanged: (value) {             
   print(value);            
},

4.2.2 監(jiān)聽輸入完成

onSubmitted: (value) {             
   print(value);            
},

4.3. 獲取TextField中的內(nèi)容

WechatIMG43.jpeg

class _YZHomeContentState extends State<YZHomeContent> {
  final userNameTextFieldController = TextEditingController();
  final passwordTextFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          TextField(
            controller: userNameTextFieldController,
            decoration: InputDecoration(
              labelText: "username",
              icon: Icon(Icons.people),
              hintText: "請輸入用戶名",
              border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.red[100],
            ),
            onChanged: (value) {
              print(value);
            },
            onSubmitted: (value) {
              print(value);
            },
          ),
          SizedBox(height: 20),
          TextField(
            controller: passwordTextFieldController,
            decoration: InputDecoration(
              labelText: "password",
              icon: Icon(Icons.lock),
              hintText: "請輸入密碼",
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 20),
          Container(
            width: double.infinity,
            height: 40,
            child: FlatButton(
              child: Text("登錄", style: TextStyle(fontSize: 20, color: Colors.white),),
              color: Colors.blue,
              onPressed: (){

                //獲取用戶名密碼
                final username = userNameTextFieldController.text;
                final password = passwordTextFieldController.text;
                print("賬號：$username 密碼：$password");
              },
            ),
          ),
        ],
      ),
    );
  }
}