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）效果