flutter懸浮按鈕案例

2022-09-01 13:54:12 字數 1922 閱讀 6188

能滑動隱藏的懸浮按鈕

untitled.gif

第一種 notificationlistener 在widget樹中,子widget滾動時會向上傳送notification,通過notificationlistener可以監控到該notification。notificationlistener也是乙個widget,可以將被監控的widget放入其child內。

notificationlistener

const notificationlistener() 

onnotification(scrollnotification notification) , 此方法需要乙個返回值,表示是否攔截住notification,如果是true,那麼notifcation到此為止;如果是false,那麼notification會繼續向更外層widget傳遞。引數scrollnotification包含了監聽到的資訊。

scrollnotification

scrollnotification();

第二種是通過scrollcontroller來監聽

scrollcontroller 常用方法

controller.addlistener(());
下面我們開始實現我們的效果

第一步我們使用scaffold floatingactionbutton 來新增我們widget ,配合 floatingactionbuttonlocation 設定下位置,

scaffold(

preferredsize: size(double.infinity,44),

),backgroundcolor: colors.white,

floatingactionbutton: animationwidget(),

floatingactionbuttonlocation: floatingactionbuttonlocation.centerfloat,

body: ...,

);

建立懸浮按鈕 animationwidget

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

//狀態管理

class notifieranimation extends changenotifier

}class animationwidget extends statefulwidget

class _animationwidgetstate extends state with singletickerproviderstatemixin

@override

void didchangedependencies() else

});}

} @override

widget build(buildcontext context) {

return align(

alignment: alignment.centerright,

child: column(

mainaxisalignment: mainaxisalignment.center,

children: [

sizedbox(height: 100),

slidetransition(

child: container(

width: 50,

height: 50,

decoration: boxdecoration(

color: colors.red

),),position: _animation,)

ios新增全域性懸浮按鈕 iOS 懸浮按鈕

想要做出懸浮在螢幕上的按鈕效果,按鈕可以隨便移動位置,其實很簡單的,沒有想象中的那麼難,其中有兩種方法可以做出這樣的效果.看下面,一一介紹兩種方法,根據需要,選擇適合自己的呦 效果圖呈現 接下來看 1.建立button 2.新增手勢,移動button 下面我就將我寫的 全部放在這,想試試的親可以貼上...

Unity UI案例(長按按鈕和雙擊按鈕案例

unity ui案例 長按按鈕和雙擊按鈕 unity中要實現自己得button需要編寫繼承自unityengine的button類,然後再重寫按鈕按下,抬起,和離開的方法 onpointerdown,onpointerup,onpointerexit 記錄時間差就行了,具體實現看 public cl...

懸浮數字的實現案例

有時候新聞或者訊息提示有幾條,可以用absolute定位來實現效果。原理是什麼呢?1.獲取數字或者狀態。複製 如下 function getnewscount function getstatus user id 2.前端處理顯示。用js處理。複製 如下 nbs程式設計客棧p www.cppcns....