首页 > 其他分享 >Flutter | 使用 InkResponse和 InkWell组件 实现事件操作

Flutter | 使用 InkResponse和 InkWell组件 实现事件操作

时间:2023-07-17 12:11:06浏览次数:34  
标签:水波纹 InkResponse InkWell Colors 点击 orangeAccent Flutter

可以包裹 不具备事件处理的组件,实现水波纹等点击事件的效果;

InkWell 水波纹限制在文本组件之内;
InkResponse 水波纹没有限制;
InkResponse 和 InkWell 都可以指定各种响应颜色、手势等相关属性;

 

 

InkWell(
        radius: 200.0,
        focusColor: Colors.red,
        hoverColor: Colors.blue,

        highlightColor: Colors.teal,//长按
        splashColor: Colors.orangeAccent,//点击时水波纹
        onTap: (){
          print('点击了按钮');
        },
        child: Text(
          '需要点击的事件',
          style: TextStyle(
              color: Colors.orangeAccent,
              fontSize: 30),
        ),
      ),

        InkResponse(
          radius: 200.0,
          focusColor: Colors.red,
          hoverColor: Colors.blue,

          highlightColor: Colors.teal,
          //长按
          splashColor: Colors.orangeAccent,
          //点击时水波纹
          onTap: () {
            print('点击了按钮');
          },
          child: Text(
            '需要点击的事件',
            style: TextStyle(
                color: Colors.orangeAccent,
                fontSize: 30),
          ),
        )

 

标签:水波纹,InkResponse,InkWell,Colors,点击,orangeAccent,Flutter
From: https://www.cnblogs.com/hztech/p/17559740.html

相关文章

  • flutter状态管理案例
     FLUTTER项目中管理不同组件、不同页面之间共享的数据关系。当需要共享的数据关系达到几十上百个的时候,我们就很难保持清晰的数据流动方向和顺序了,导致应用内各种数据传递嵌套和回调满天飞。在这个时候,我们迫切需要一个解决方案,来帮助我们理清楚这些共享数据的关系,于是状态管理......
  • flutter provider create: (_) => xxxx(),
    Provider通常使用ChangeNotifierProvider配合ChangeNotifier一起来实现状态的管理与Widget的更新。ChangeNotifierProvider本质上其实就是Widget,它作为父节点Widget,可将数据共享给其所有子节点Widget使用或更新;创建model,继承ChangeNotifier,用来实现数据更新的通知并监听......
  • Flutter系列文章-Flutter环境搭建和Dart基础
    Flutter是Google推出的一个开源的、高性能的移动应用开发框架,可以用一套代码库开发Android和iOS应用。Dart则是Flutter所使用的编程语言。让我们来看看如何搭建Flutter开发环境,并了解Dart语言的基础知识。一、Flutter环境搭建1.安装FlutterSDK首先,访问Flutter官网下载Flutte......
  • 直播软件源码,Flutter中导航栏和状态栏设置成透明
    直播软件源码,Flutter中导航栏和状态栏设置成透明一、Flutter透明状态栏设置 import'package:flutter/material.dart';//导入对应的文件import'package:flutter/services.dart';   voidmain(){ //配置透明的状态栏 SystemUiOverlayStylesystemUiOverlayStyle=co......
  • Flutter/Dart import 的方式 大全
      导入文件import后面的路径有哪几种?各代表什么意思?关键字有那些?文件导入的顺序是什么?​import'dart:xxx'; 引入Dart标准库import'xxx/xxx.dart';引入绝对路径的Dart文件import'package:xxx/xxx.dart'; 引入Pub仓库pub.dev(或者pub.flutter-io.cn)中的第三方库impor......
  • flutter icon
      可以直接使用Icon(Icons.NAME)                               ......
  • ChatGPT + Flutter快速开发多端聊天机器人App
    介绍:当前ChatGPT应用如雨后春笋般应运而生,给移动端开发者也带来了极大的机会。本课程将整合ChatGPT与Flutter高级技术,手把手带你从0到1开发一款可运行在多端的聊天机器人App,帮助你抓住机遇,快速具备AI运用能力,成为移动端领域的AI高手。目录:第1章课程介绍与学习指南第2章走进Cha......
  • 如何优化Flutter的性能?
    Flutter的性能优化是一个持续的过程,需要我们不断地学习和实践。优化的目标不仅是提高应用的运行速度,还包括提高应用的响应速度,减少应用的内存使用,以及提高应用的能效。希望我们深入的探索这些实用的技巧和最佳实践可以帮助在使用Flutter构建应用时,提高应用的性能。不可否认Fl......
  • 融合Flutter与小程序容器助力业务创新
    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、桌面和嵌入式平台。Flutter开源、免费,拥有宽松的开源协议,适合商业项目。它可以使用户在单一代码的条件下构建出iOS和安卓应用,并且方式较为现代化,同时,从用户界面来看,整体页......
  • 解决Flutter编译一直显示Running Gradle task 'assembleDebug'
    该问题由Gradle的Maven仓库在国外访问受限引起,使用阿里云的镜像仓库地址替代解决1.修改FlutteSDK目录下的Flutter打包配置文件flutter.gradle一般位于flutter\packages\flutter_tools\gradle\flutter.gradle1buildscript{repositories{//google()......