您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
flutter-手势
发布时间：2026-08-20 23:00:54编辑：雪饮阅读（）
-
官网文档链接
https://docs.flutter.dev/ui/interactivity/gestures
第一篇就是一些概念性的东西，我已经看完了，
其实也没有什么，就是长按，普通点击等效果。
接下来完善下之前项目中的首页底部计数器的移除以及详情页对于非视频内容的内容解析，比如图片列表解析。
main.dart移除计数器：
本次改动详见
https://gitee.com/xy220807/flutter-learning/commit/f59eece1f8874e4f0fa9ab8a3f3235620ef85134
若构建错误可能需要手动下载如下两个文件
https://github.com/media-kit/libmpv-win32-video-build/releases/download/2023-09-24/mpv-dev-x86_64-20230924-git-652a1dd.7z
https://github.com/alexmercerind/flutter-windows-ANGLE-OpenGL-ES/releases/download/v1.0.1/ANGLE.7z
在视频插件这里设置这两个手动下载后的环境变量值（存放路径）
C:\Users\Administrator\AppData\Local\Pub\Cache\hosted\pub.flutter-io.cn\media_kit_libs_windows_video-1.0.11\windows\CMakeLists.txt:
# This file is a part of media_kit (https://github.com/media-kit/media-kit).
#
# Copyright © 2021 & onwards, Hitesh Kumar Saini <saini123hitesh@gmail.com>.
# All rights reserved.
# Use of this source code is governed by MIT license that can be found in the LICENSE file.
cmake_minimum_required(VERSION 3.14)
# This option is read by the other packages which are part of package:media_kit.
option(MEDIA_KIT_LIBS_AVAILABLE "package:media_kit libraries are available." ON)
set(PROJECT_NAME "media_kit_libs_windows_video")
project(${PROJECT_NAME} LANGUAGES CXX)
# Deal with MSVC incompatiblity
add_compile_definitions(_DISABLE_CONSTEXPR_MUTEX_CONSTRUCTOR)
# ------------------------------------------------------------------------------
function(download_and_verify url md5 locationForArchive)
# Check if the archive exists.
if(EXISTS "${locationForArchive}")
file(MD5 "${locationForArchive}" ARCHIVE_MD5)
# If MD5 doesn't match, delete the archive to download again.
if(NOT md5 STREQUAL ARCHIVE_MD5)
file(REMOVE "${locationForArchive}")
message(STATUS "MD5 mismatch. File deleted.")
endif()
endif()
# Download the archive if it doesn't exist.
if(NOT EXISTS "${locationForArchive}")
message(STATUS "Downloading archive from ${url}...")
file(DOWNLOAD "${url}" "${locationForArchive}")
message(STATUS "Downloaded archive to ${locationForArchive}.")
# Verify MD5 of the newly downloaded file.
file(MD5 "${locationForArchive}" ARCHIVE_MD5)
if(md5 STREQUAL ARCHIVE_MD5)
message(STATUS "${locationForArchive} Verification successful.")
else()
message(FATAL_ERROR "${locationForArchive} Integrity check failed, please try to re-build project again.")
endif()
endif()
endfunction()
function(check_directory_exists_and_not_empty dir result_var)
# Check if the directory exists
if(EXISTS "${dir}")
# Check if the directory is not empty
file(GLOB dir_contents "${dir}/*")
if(dir_contents)
set(${result_var} TRUE PARENT_SCOPE)
else()
set(${result_var} FALSE PARENT_SCOPE)
message(STATUS "Directory ${dir} exists but is empty!")
endif()
else()
set(${result_var} FALSE PARENT_SCOPE)
message(STATUS "Directory ${dir} does not exist!")
endif()
endfunction()
# libmpv archive containing the pre-built shared libraries & headers.
set(LIBMPV "mpv-dev-x86_64-20230924-git-652a1dd.7z")
# Download URL & MD5 hash of the libmpv archive.
set(LIBMPV_URL "https://github.com/media-kit/libmpv-win32-video-build/releases/download/2023-09-24/${LIBMPV}")
set(LIBMPV_MD5 "a832ef24b3a6ff97cd2560b5b9d04cd8")
# Download location of the libmpv archive.
set(LIBMPV_ARCHIVE "D:/flutterDemo/mpv-dev-x86_64-20230924-git-652a1dd.7z")
set(LIBMPV_SRC "${CMAKE_BINARY_DIR}/libmpv")
download_and_verify(
${LIBMPV_URL}
${LIBMPV_MD5}
${LIBMPV_ARCHIVE}
)
check_directory_exists_and_not_empty(${LIBMPV_SRC} LIBMPV_SRC_VALID)
# Extract the libmpv archive.
if(NOT LIBMPV_SRC_VALID)
message(STATUS "Extracting ${LIBMPV}...")
make_directory("${LIBMPV_SRC}")
add_custom_target("${PROJECT_NAME}_LIBMPV_EXTRACT" ALL)
add_custom_command(
TARGET "${PROJECT_NAME}_LIBMPV_EXTRACT"
COMMAND "${CMAKE_COMMAND}" -E tar xzf "\"${LIBMPV_ARCHIVE}\""
COMMAND xcopy "\"${LIBMPV_SRC}/include/mpv\"" "\"${LIBMPV_SRC}/mpv\"" /E /H /C /I
COMMAND rmdir "\"${LIBMPV_SRC}/include\"" /S /Q
COMMAND ren "\"${LIBMPV_SRC}/mpv\"" "\"include\""
WORKING_DIRECTORY "${LIBMPV_SRC}"
)
endif()
# ------------------------------------------------------------------------------
# ANGLE archive containing the pre-built shared libraries & headers.
set(ANGLE "ANGLE.7z")
# Download URL & MD5 hash of the ANGLE archive.
set(ANGLE_URL "https://github.com/alexmercerind/flutter-windows-ANGLE-OpenGL-ES/releases/download/v1.0.1/ANGLE.7z")
set(ANGLE_MD5 "e866f13e8d552348058afaafe869b1ed")
# Download location of the ANGLE archive.
set(ANGLE_ARCHIVE "D:/flutterDemo/ANGLE.7z")
set(ANGLE_SRC "${CMAKE_BINARY_DIR}/ANGLE")
download_and_verify(
${ANGLE_URL}
${ANGLE_MD5}
${ANGLE_ARCHIVE}
)
check_directory_exists_and_not_empty(${ANGLE_SRC} ANGLE_SRC_VALID)
# Extract the ANGLE archive.
if(NOT ANGLE_SRC_VALID)
message(STATUS "Extracting ${ANGLE}...")
make_directory("${ANGLE_SRC}")
add_custom_target("${PROJECT_NAME}_ANGLE_EXTRACT" ALL)
add_custom_command(
TARGET "${PROJECT_NAME}_ANGLE_EXTRACT"
COMMAND "${CMAKE_COMMAND}" -E tar xzf "\"${ANGLE_ARCHIVE}\""
WORKING_DIRECTORY "${ANGLE_SRC}"
)
endif()
# ------------------------------------------------------------------------------
set(PLUGIN_NAME "media_kit_libs_windows_video_plugin")
add_library(
${PLUGIN_NAME} SHARED
"include/media_kit_libs_windows_video/media_kit_libs_windows_video_plugin_c_api.h"
"media_kit_libs_windows_video_plugin_c_api.cpp"
)
apply_standard_settings(${PLUGIN_NAME})
set_target_properties(
${PLUGIN_NAME}
PROPERTIES
CXX_VISIBILITY_PRESET
hidden
)
target_compile_definitions(
${PLUGIN_NAME}
PRIVATE
FLUTTER_PLUGIN_IMPL
)
target_include_directories(
${PLUGIN_NAME} INTERFACE
"${CMAKE_CURRENT_SOURCE_DIR}/include"
)
target_link_libraries(
${PLUGIN_NAME}
PRIVATE
flutter
flutter_wrapper_plugin
)
set(
media_kit_libs_windows_video_bundled_libraries
"${LIBMPV_SRC}/libmpv-2.dll"
"${ANGLE_SRC}/d3dcompiler_47.dll"
"${ANGLE_SRC}/libEGL.dll"
"${ANGLE_SRC}/libGLESv2.dll"
"${ANGLE_SRC}/vk_swiftshader.dll"
"${ANGLE_SRC}/vulkan-1.dll"
"${ANGLE_SRC}/zlib.dll"
PARENT_SCOPE
)
核心修改
C:\Users\Administrator\AppData\Local\Pub\Cache\hosted\pub.flutter-io.cn\media_kit_libs_windows_video-1.0.11\windows\CMakeLists.txt:
set(LIBMPV_ARCHIVE "D:/flutterDemo/mpv-dev-x86_64-20230924-git-652a1dd.7z")
set(LIBMPV_SRC "${CMAKE_BINARY_DIR}/libmpv")
set(ANGLE_ARCHIVE "D:/flutterDemo/ANGLE.7z")
set(ANGLE_SRC "${CMAKE_BINARY_DIR}/ANGLE")
那么这次视频解析主要解决了两个问题，一个就是非link的情况，另外一个是link里面包含第三方链接的情况。
这次修改详细参见
https://gitee.com/xy220807/flutter-learning/commit/efc2c9ec5d16f0f2ab6f2a405a999aa9b5ff3155
以及
https://gitee.com/xy220807/flutter-learning/commit/526d80aabae1005fca04ba2b9ce014b38c232b62
接着再次新增
新增富文本解析、富文本授权图片处理、详情页资源分组、附件文件解析
详情参见
https://gitee.com/xy220807/flutter-learning/commit/0b316500378bb339a1306653b3a1908268b75c85
接下来再实现下一页的功能调用，以及搜索结果页面与搜索表单页面拆分为两个页面。
参见
https://gitee.com/xy220807/flutter-learning/commit/adf2951752bfce9cd6e36abc36760aa0ee5d8242
https://gitee.com/xy220807/flutter-learning/commit/52bcf640ed02c9eff64b03f8d5c2862197708ab9
https://gitee.com/xy220807/flutter-learning/commit/a845b4b2374d0c1b3f0b7fc8e920c9b9c2ac6460
然后再写下显示当前页
https://gitee.com/xy220807/flutter-learning/commit/d65dea862d21b7f7a8a82e61a0aa8f8430d43281
接下来是手势第二篇
官方文档链接
https://docs.flutter.dev/cookbook/gestures/handling-taps
其实也没什么。
以及种子解析器
https://gitee.com/xy220807/flutter-learning/commit/2373798e3bda9b0e351602285400a17b4c480c49
以及迅雷解析种子进行下载的实现
https://gitee.com/xy220807/flutter-learning/commit/e98dddfda71ff62f66010cac350fa3def4f2490d
以及图片加载优化
https://gitee.com/xy220807/flutter-learning/commit/341793b4938605b66b56af5b582bd957ac08a72b
接下来再来看看将对象拖出应用
https://docs.flutter.dev/ui/interactivity/gestures/drag-outside
这其实就是讲了拖拽的效果。
接下来继续完善资源类型筛选及下拉框的实现。
https://gitee.com/xy220807/flutter-learning/commit/e73d1af820bb4f653d3c2f7feab63609ce266fd1
接下来看在应用内拖拽ui元素
原文档
https://docs.flutter.dev/cookbook/effects/drag-a-widget
其实也没什么。
接下来再看
https://docs.flutter.dev/cookbook/gestures/ripples
添加材质 触碰波纹
就一涟漪动画效果而已。
接下来查看
https://docs.flutter.dev/cookbook/gestures/dismissible
实现滑动以解散
其实本质就是滑动删除。
然后接下来就是完善下vip板块开发
https://gitee.com/xy220807/flutter-learning/commit/b442bc15c2e579da879612c2a94170b749a69f01
关键字词：flutter,手势