Flutter 之基本控件

更新日期: 2019-11-01阅读: 2k标签: 控件

Flutter 中有很多 UI 控件,而文本、图片和按钮是 Flutter 中最基本的控件,构建视图基本上都要使用到这三个基本控件


文本控件

文本是视图系统中的常见控件,用于显示一段特定样式的字符串,在 Flutter 中,文本展示是通过 Text 控件实现的

Text 支持的文本展示类型

  • 单一样式的文本 Text
  • 混合样式的富文本 Text.rich

单一样式的文本 Text

  • 控制整体文本布局的参数:textAlign(文本对齐方式)、textDirection(文本排版方向)、maxLines(文本显示最大行数)、overflow(文本截断规则),等等。这些都是构造函数中的参数
  • 控制文本展示样式的参数:fontFamily(字体名称)、fontSize(字体大小)、color(文本颜色)、shadows(文本阴影)、等等。这些都是构造函数中的参数 style 中的参数

混合样式的富文本 Text.rich

  • 把一段字符串分为几个片段来管理,给每个片段单独设置样式,使用 TextSpan 来实现


图片

使用 Image 来加载不同形式、不同格式的图片

  • 加载本地资源图片:Image.asset('images/logo.png');
  • 加载本地(File 文件)图片:Image.file(File('/storage/test.png'));
  • 加载网络图片:Image.network('http://xxx/logo.png');

支持高级功能的图片控件

  • FadeInImage:提供了图片占位的功能,支持在图片加载完成时淡入淡出的视觉效果;ImageCache 使用 LRU(Least Recently User:最近最少使用)算法进行缓存更新策略,并且默认最多存储 1000 张图片,最大缓存限制为 100MB,当限定的空间已存满数据时,把最久没有被访问到的图片清除,图片只缓存在内存中
  • CachedNetworkImage:不仅支持缓存图片到内存中,还支持缓存到文件系统中;加载过程占位与加载错误占位;自定义控件占位


按钮

通过按钮,可以响应用户的交互事件。Flutter 中提供了三个最基本的按钮控件:FloatingActionButton、FlatButton、RaisedButton

  • FloatingActionButton:圆形按钮,一般出现在屏幕内容的前面
  • FlatButton:扁平化的按钮,默认透明背景
  • RaisedButton:凸起的按钮,默认带有灰色背景

按钮控件中的参数

  • onPressed:设置点击回调,如果 onPressed 参数为空,则按钮处于禁用状态,不响应用户点击事件
  • child:设置按钮的内容,可以接收任意的 Widget


以下为具体代码实现

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

/**
 * 经典控件
 */
class MyBasiControl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyText(),
    );
  }
}

String content = '欢迎关注\nAndroid小白营\n在这里我们可以一起成长\n';

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Android小白营'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(
              '以下为不同样式的文本控件\n\n单一样式文本 Text\n一:默认样式\n' + content,
            ),
            Text(
              '二:自定义样式:居中显示,黑色背景,白色14号粗体字体\n' + content,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                backgroundColor: Colors.black,
                fontSize: 14,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text.rich(TextSpan(children: [
              TextSpan(
                  text: '\n富文本 Text.rich\n',
                  style: TextStyle(color: Colors.red, fontSize: 20)),
              TextSpan(text: '欢迎关注\n'),
              TextSpan(
                  text: 'Android小白营\n',
                  style: TextStyle(
                      color: Colors.blueAccent,
                      fontWeight: FontWeight.bold,
                      fontSize: 18)),
              TextSpan(
                  text: '在这里我们可以一起成长',
                  style: TextStyle(
                      backgroundColor: Colors.deepOrangeAccent,
                      color: Colors.cyanAccent,
                      fontSize: 16))
            ])),
            FlatButton(
                color: Colors.cyanAccent,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0)),
                onPressed: () {
                  Fluttertoast.showToast(msg: '测试点击事件');
                },
                colorBrightness: Brightness.light,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.add_circle_outline),
                    Text('添加')
                  ],
                ))
          ],
        ));
  }
}

链接: https://fly63.com/article/detial/6264

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!