颤振是谷歌的移动界面框架,可以快速在iOS和Android上构建高质量的原生用户界面。颤振可以与现有的代码一起工作。在全世界,颤振正在被越来越多的开发者和组织使用,并且颤振是完全免费,开源的。
它也是构建未来的谷歌紫红色应用的主要方式。
目前移动市场上很多业务都需要开发Android/IOS两个端,开发成本比较高。颤振在跨端上凭借着性能优势关注量,使用度也持续上升。今天给大家分享在去年就写的一个颤振版本的侧滑栏。
先上一张实现效果图
新行(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
孩子们:& lt; Widget> (
新的扩展(
孩子:新中心(
孩子:新的文本(selectLabel
风格:
新TextStyle(颜色:颜色。橙色,字形大小:40.0))))
幻灯片
),
);
颤振提供手势处理类GestureDetector,当手势开始滑动是更新中央标签显示,停止或者取消时,取消标签显示并把对应的数据填充到标签上。
新GestureDetector (
行为:HitTestBehavior.translucent,
孩子:slideWidget,>
空白updateLabel (BuildContext上下文,抵消globalPosition) {
var对象=globalKey& # 63; .currentContext& # 63; .findRenderObject ();
var翻译=对象# 63;.getTransformTo (null) & # 63; .getTranslation ();
int指数=((globalPosition。dy -翻译。y -页面顶栏)/(globalKey.currentContext.size。高度-页面顶栏)*
widget.showList.length)
.toInt ();
如果(指数& lt;widget.showList。长度,,指数在=0){
设置状态((){
selectLabel=widget.showList(指数);
如果小部件。onChangeSelect !=null) {
widget.onChangeSelect (selectLabel);
}
});
}
}
其中,获取控件距离屏幕的距离方法为:
var对象=globalKey& # 63; .currentContext& # 63; .findRenderObject ();
var翻译=对象# 63;.getTransformTo (null) & # 63; .getTranslation ();
主布局
采用了颤振的堆栈布局(非常类似Android FrameLayout),下层是城市选择页面数据,上层盖了一层SliderBar
新的支架(
appBar: getAppBar (),
身体:新的堆栈(孩子们:& lt; Widget>
getShowContentView (),
新的滑杆(
cityListUtils.labelList、>
小部件rightCity=new容器(
颜色:AppColor.white,
填充:EdgeInsets。(正确的:20.0),
孩子:新ListView.builder (
控制器:scrollController,
itemCount: cityListUtils.cityList.length,
itemBuilder:(listContext、位置){
城市var=cityListUtils.cityList(位置);
如果CityModel(市){
返回新GestureDetector (
行为:HitTestBehavior.translucent,
孩子:新容器(
装饰:新BoxDecoration (
边界:新Border.all (
颜色:AppColor。bg1、宽度:0.5)),
高度:48.0,
填充:EdgeInsets。(左:15.0),
对齐:Alignment.centerLeft,
孩子:新的文本(city.name)),>
{" A ":[{“名称”:“澳门”、“id”:“* * *”、“fullWord”:“澳门”,“第一”:“我”,“isShow”:“true”}]}
数据解析使用到<代码>飞镖:转换> json.decode (jsonStr) 解析的数据为地图,在地图将转为具体的实体,实体解析工具推荐使用开源工具自动生成模型文件<代码> FlutterJsonBeanFactory>
进口的飞镖:转换显示json;
类CityModel {
字符串第一;
字符串fullWord;
字符串id;
字符串isShow;
字符串名称;
bool isSelected=false;
CityModel.fromParams (
{这个。首先,这个。fullWord,这。id,这个。isShow this.name});
工厂CityModel (jsonStr)=比;jsonStr是字符串
& # 63;CityModel.fromJson (json.decode (jsonStr))
:CityModel.fromJson (jsonStr);
CityModel.fromJson (jsonRes) {
第一次=jsonRes['第一次'];
fullWord=jsonRes [' fullWord '];
id=jsonRes (“id”);
isShow=jsonRes [' isShow '];
name=jsonRes['名称');
}
@override
字符串toString () {
返回“{“第一”:${第一!=null # 63;“$ {json.encode(第一个)}’:‘零’},“fullWord”: $ {fullWord !=null # 63;“$ {json.encode (fullWord)}’:‘零’},“id”: $ {id !=null # 63;“$ {json.encode (id)}’:‘零’},“isShow”: $ {isShow !=null # 63;“$ {json.encode (isShow)}’:‘零’},“名字”:${名字!=null # 63;“$ {json.encode(名字)}’:‘零’}}';
}
}
