2020年12月

该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新;所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo 欢迎Star

博客:思否, 掘金, 知乎, 简书, 慕课, CSDN, 博客园, DX前端
公众号:DX前端框架知识库
联系我:公众号菜单点击联系我

使用场景

  1. 组件解释:固定高度的单个行,通常包含一些文本以及前导或尾随图标。
  2. 当需要给一个列表list的时候,你可以用ListTile来实现,它可以将元素一行一行的展示出来,并且你可以给每个元素绑定事件,一个ListTile就是一行

预览

_

组件参数说明

const ListTile({
    Key key,
    this.leading, //左侧的组件
    this.title, //中间的主标题
    this.subtitle, //中间的副标题
    this.trailing, //右侧组件,通常是一个值或者一个图标
    this.isThreeLine = false, //是否显示三行
    this.dense, //是否以垂直密集的方式显示,这样文字会更小
    this.visualDensity,
    this.shape, //定义外观形状
    this.contentPadding, //内容与边框之间的边距,默认16
    this.enabled = true, //是否可以互动事件
    this.onTap, //点击事件
    this.onLongPress, //长按事件
    this.mouseCursor, //鼠标悬停在ListTile上时的处理效果,给web用的
    this.selected = false, //如果是true,文本和图标将会以相同的颜色呈现
    this.focusColor, 
    this.hoverColor, //指针悬停在ListTile上的颜色
    this.focusNode, //聚焦事件
    this.autofocus = false, //是否默认聚焦
    this.tileColor, //listTile的背景颜色,selected=false时生效
    this.selectedTileColor, //listTile的背景颜色,selected=true时生效
  })

案例代码

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Flutter ListTile'),
            Text(
              'Flutter每周一组件(by DX前端)',
              style: TextStyle(
                fontSize: 12.0,
              ),
            )
          ],
        ),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ListTile(
            leading: Icon(Icons.graphic_eq),
            title: Text('这是主标题'),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.waves),
            title: Text('这是主标题'),
            subtitle: Text('这是副标题'),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.ballot),
            title: Text('这是主标题'),
            // isThreeLine: true, //文字超出后会默认换行
            subtitle: Text('这是副标题两行,这是副标题两行,这是副标题两行,这是副标题两行,这是副标题两行'),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
        ],
      )),
    );
  }

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜公众号 [DX前端框架知识库],发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端知识和实战.

DX前端,分享前端框架知识库,文章详见:DX前端

关注DX前端

flutter_week

Flutter Inkwell使用详解

该文章属于【Flutter每周一组件】系列,其它组件可以查看该系列下的文章,该系列会不间断更新;所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo 欢迎Star

使用场景

当需要给一个元素点击事件的时候,你可以用InkWell来包裹这个元素,它里面有常用交互事件和点击效果,可以简单实现想要的效果

预览

组件参数说明

const InkWell({
    Key key,
    Widget child, //子组件
    GestureTapCallback onTap, //单击事件
    GestureTapCallback onDoubleTap, //双击事件
    GestureLongPressCallback onLongPress, //长按事件
    GestureTapDownCallback onTapDown, //手指按下
    GestureTapCancelCallback onTapCancel, //取消点击事件
    ValueChanged<bool> onHighlightChanged, //突出显示或停止突出显示时调用
    ValueChanged<bool> onHover, //当指针进入或退出墨水响应区域时调用
    MouseCursor mouseCursor,
    Color focusColor, //获取焦点颜色
    Color hoverColor, //指针悬停时颜色
    Color highlightColor, //按住不放时的颜色
    MaterialStateProperty<Color> overlayColor,
    Color splashColor, //溅墨颜色
    InteractiveInkFeatureFactory splashFactory, //自定义溅墨效果
    double radius, //溅墨半径
    BorderRadius borderRadius, //溅墨元素边框圆角半径
    ShapeBorder customBorder, //覆盖borderRadius的自定义剪辑边框
    bool enableFeedback = true, //检测到的手势是否应该提供声音和/或触觉反馈,默认true
    bool excludeFromSemantics = false, //是否将此小部件引入的手势从语义树中排除。默认false
    FocusNode focusNode,
    bool canRequestFocus = true,
    ValueChanged<bool> onFocusChange,
    bool autofocus = false, 
  })

案例代码

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter InkWell'),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          InkWell(
            onTap: () {
              print('点击了');
            },
            child: ListTile(
              title: Text('InkWell的子组件是ListTile'),
              trailing: Icon(Icons.chevron_right),
            ),
          ),
          Divider(),
          InkWell(
            onTap: () {
              print('点击了');
            },
            highlightColor: Colors.blue,
            autofocus: true,
            child: Text('InkWell的子组件是Text'),
          ),
          Divider(),
          InkWell(
            onTap: () {
              print('必须要绑定事件,不然没效果');
            },
            borderRadius: BorderRadius.all(Radius.circular(50.0)),
            splashColor: Colors.red,
            child: Container(
              padding: EdgeInsets.all(10.0),
              child: Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(300.0))),
                padding: EdgeInsets.all(10.0),
                child: Text('InkWell的子组件是Container'),
              ),
            ),
          ),
        ],
      )),
    );
  }

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜公众号 [DX前端框架知识库],发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端知识和实战.