摘要:本文用到的組件這是一個簡單版仿微信的左滑刪除的組件左滑刪除組件地址倉庫地址問題在上,使用仿微信樣式的左滑刪除組件時如果這一行的背景色是透明的,就會出現如下問題透明的下可以看到刪除和編輯按鈕,我們就需要處理一下。
本文用到的組件:
這是一個簡單版仿微信的左滑刪除的組件:
# 左滑刪除組件 left_scroll_actions: any
pub地址:
https://pub.dartlang.org/pack...
倉庫地址:
https://github.com/mjl0602/le...
在flutter上,使用仿微信樣式的左滑刪除組件時,如果這一行的背景色是透明的,就會出現如下問題:
透明的Row下可以看到刪除和編輯按鈕,我們就需要處理一下。
至于為啥要用透明背景色——因為Scaffold的背景色是漸變的……當時畫設計圖給自己挖的坑。
組件分裝很簡單,把滑動進度和透明度掛鉤,就可以了:
// 如果Row的背景必須是透明顏色的,就要做處理了: class ExampleRow extends StatefulWidget { final Function onTap; final Function onEdit; final Function onDelete; const ExampleRow({ Key key, this.onTap, this.onDelete, this.onEdit, }) : super(key: key); @override _ExampleRowState createState() => _ExampleRowState(); } class _ExampleRowState extends State效果GIF{ double opa = 0; @override Widget build(BuildContext context) { Widget myDeviceStatus = Icon(Icons.supervised_user_circle); Widget body = Container( padding: EdgeInsets.fromLTRB(12, 0, 0, 0), height: 92, width: double.infinity, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: Container( height: 66, width: 66, decoration: BoxDecoration( borderRadius: BorderRadius.circular(33), ), child: Placeholder(), ), ), Container( width: 44, height: double.infinity, child: Opacity( opacity: 1 - opa, child: Center( child: myDeviceStatus, ), ), ) ], ), ); List actions = [ Opacity( opacity: opa, child: MaterialButton( child: Container( color: Colors.white.withOpacity(0), alignment: Alignment.center, padding: EdgeInsets.all(20), child: Icon(Icons.delete, color: Colors.red), ), onTap: widget.onDelete, ), ), Opacity( opacity: opa, child: MaterialButton( child: Container( color: Colors.white.withOpacity(0), alignment: Alignment.center, padding: EdgeInsets.all(20), child: Icon(Icons.edit, color: Colors.blue), ), onTap: widget.onDelete, ), ), ]; body = LeftScroll( child: body, buttonWidth: 70, buttons: actions, onTap: widget.onTap, onScroll: (a) { opa = a; setState(() {}); print(a); }, onSlideStarted: () { // opa = 0; setState(() {}); }, onSlideCompleted: () { opa = 1; setState(() {}); }, onSlideCanceled: () { opa = 0; setState(() {}); }, ); return body; } }
還可以,這個思路和UI效果都是可以接受的
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105984.html
摘要:而在中,我們可以將看做是,但它與并不是完全等價的。中包含有狀態和無狀態,分別用和表示。在中,由于是不可變的,沒有與等價的功能函數。在中,要是先透明需要使用透明的包裝一下才能實現。近似于中的,的工作機制和中的一致。文章概述 本人之前主要從事iOS開發工作,剛好Flutter文檔中有一篇Flutter for iOS developers的文檔,之前兩篇文章,我們大致上體驗了Flutter,這篇...
閱讀 1572·2021-10-14 09:42
閱讀 3815·2021-09-07 09:59
閱讀 1292·2019-08-30 15:55
閱讀 572·2019-08-30 11:17
閱讀 3337·2019-08-29 16:06
閱讀 500·2019-08-29 14:06
閱讀 3123·2019-08-28 18:14
閱讀 3642·2019-08-26 13:55