flutter學習--基礎組件

開發中常用的基礎組件，包括Text、Image、TextField、Text.rich、ClipOval等。

一、Text

文本組件，相當於android中的TextView控件。
（1）看一下源碼屬性：

data是必傳參數，其他是可選參數。

（2）使用

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("TextWidget"),
        ),
        body: Container(
          width: 200,
          color: Colors.green,
          child: Text(
            "測試", //文本信息
            style: TextStyle( //設置字體樣式
              color: Colors.red, //字體顏色
              fontSize: 25, //字體大小
            ),
            maxLines: 1,//最大顯示多少行
            textDirection: TextDirection.ltr,//文本顯示方向，從左到右
            textAlign: TextAlign.center,//文本居中顯示
            softWrap: true,//是否自動換行
            overflow: TextOverflow.ellipsis, //當文本超過顯示範圍時，剩餘文本顯示方式，省略號顯示
          ),
        ));
  }
}

二、Text.rich

相當於android中的SpannableString效果。
（1）使用：

class TextRichWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("TextRichWidget"),
      ),
      body: Container(
        child: Text.rich(
          TextSpan(children: [
            TextSpan(text: "鏈接地址：", style: TextStyle(fontSize: 16)),
            TextSpan(
                text: "www.baidu.com", style: TextStyle(color: Colors.blue)),
          ]),
          textAlign: TextAlign.start,
        ),
      ),
    );
  }
}

（2）效果：

三、TextField

文本輸入組件，相當於android中的EditText。
（1）看一下源碼主要屬性：

只列舉了常用的屬性
（2）使用

class TextFieldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("TextFieldWidget"),
      ),
      body: Container(
        child: TextField(
          controller: TextEditingController(text: "顯示內容"), //輸入框內容

          decoration: InputDecoration(
              hintText: "TextFieldWidget", //輸入框爲空時顯示的提示內容
              hintStyle: TextStyle(), //樣式，和Text一樣
              border: OutlineInputBorder(//邊框
                borderRadius: BorderRadius.circular(5.0),
              ),
              contentPadding: EdgeInsets.all(30) //文本距離邊框的內邊距
              ),
          style: TextStyle(), ////樣式，和Text一樣
          onChanged: (value) {//內容改變的回調
            print(value);
          },
          onSubmitted: (value) { //按回車的回調
            print(value);
          },
          enabled: true, //是否禁用
          obscureText: true, //是否是密碼
        ),
      ),
    );
  }
}

（3）效果

四、Image

圖片組件，相當於android中的ImageView。
（1）看一下源碼主要屬性：

（2）使用方式1—加載本地圖片：
需要先將圖片在 pubspec.yaml 中進行配置。如下：


需要嚴格按照格式進性配置。加載代碼如下：

class ImageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageWidget'),
      ),
      body: Container(
        child: Image(
          image: AssetImage("assets/images/ic_launcher.png"),
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

當然還有一種簡寫方式：

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageWidget'),
      ),
      body: Container(
        child: Image.asset("assets/images/ic_launcher.png"),
        width: 100,
        height: 100,
      ),
    );
  }
}

（3）使用方式2—加載網絡圖片：
使用 NetworkImage，代碼如下：

class ImageWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageWidget'),
      ),
      body: Container(
        child: Image(
          image: NetworkImage("xxxxxx"),
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

當然還有一種簡寫方式：

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageWidget'),
      ),
      body: Container(
        child: Image.network('xxxx'),
        width: 100,
        height: 100,
      ),
    );
  }
}

當然，除了這些，還有以下方式加載：

• Image.file
• Image.memory

五、ClipOval

相當於android中的圓形圖片
（1）使用

class ClipOvalWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipOvalWidget"),
      ),
      body: Container(
        child: ClipOval(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

（2）效果