Flutter質(zhì)感設(shè)計之列表項
本文為大家分享了Flutter實現(xiàn)列表項的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)建achievement_view_list_item.dart文件,具體的實現(xiàn)每一個列表項。
import 'package:flutter/material.dart';
// 創(chuàng)建類,成就目標(biāo)
class Target {
// 常量,構(gòu)建函數(shù)
const Target({
// 自變量,目標(biāo)名稱
this.name,
// 自變量,目標(biāo)獎勵
this.reward
});
// 最終值,成就目標(biāo)名稱
final String name;
// 最終值,成就目標(biāo)獎勵
final String reward;
}
// 定義數(shù)據(jù)類型,目標(biāo)改變回調(diào)
typedef void TargetChangedCallback(
// 類型參數(shù),目標(biāo)
Target target,
// 類型參數(shù),是否新目標(biāo)
bool nowTarget
);
// 創(chuàng)建類,成就視圖列表項目,繼承StatelessWidget(無狀態(tài)的控件)
class AchievementViewItem extends StatelessWidget {
// 構(gòu)造函數(shù)
AchievementViewItem({
// 目標(biāo)參數(shù),傳遞目標(biāo)
Target target,
// 自變量,是否新目標(biāo)
this.nowTarget,
// 自變量,對目標(biāo)的改變
this.onTargetChanged
}) :
// 接收傳遞的目標(biāo)
target = target,
// 調(diào)用父類
super(
/*
* 控件和元素的標(biāo)識符:
* 將其對象的標(biāo)識用作其值
* 用于將控件的標(biāo)識綁定到用于生成該控件的對象的標(biāo)識
*/
key: new ObjectKey(target)
);
// 類成員,存儲目標(biāo)
final Target target;
// 類成員,存儲是否新目標(biāo)
final bool nowTarget;
// 類成員,對目標(biāo)的改變
final TargetChangedCallback onTargetChanged;
// 類函數(shù),獲得顏色
Color _getColor(BuildContext context) {
/*
* 是否新目標(biāo)
* 是:返回灰色
* 否:返回主題的背景色
*/
return nowTarget ? Colors.black54 : Theme.of(context).primaryColor;
}
// 類函數(shù),獲得文本樣式
TextStyle _getNameTextStyle(BuildContext context) {
// 如果不是新目標(biāo),返回文本樣式控件
if (!nowTarget) return new TextStyle(
// 繪制文本的大?。?6.0
fontSize: 16.0,
// 繪制文本時使用的顏色:黑色
color: Colors.black,
// 繪制文本時加粗字體
fontWeight: FontWeight.bold,
);
// 返回文本樣式控件
return new TextStyle(
fontSize: 16.0,
// 繪制文本時使用的顏色:灰色
color: Colors.black54,
// 繪制文本時加粗字體
fontWeight: FontWeight.bold,
// 在文本附近繪制的裝飾:文本中繪制一條橫線
decoration: TextDecoration.lineThrough,
);
}
// 類函數(shù),獲得文本樣式
TextStyle _getRewardTextStyle(BuildContext context) {
// 如果不是新目標(biāo),返回文本樣式控件
if (!nowTarget) return new TextStyle(
// 繪制文本的大小:13.0
fontSize: 13.0,
// 繪制文本時使用的顏色:黑色
color: Colors.black,
);
// 返回文本樣式控件
return new TextStyle(
// 繪制文本的大?。?3.0
fontSize: 13.0,
// 繪制文本時使用的顏色:灰色
color: Colors.black54,
// 在文本附近繪制的裝飾:文本中繪制一條橫線
decoration: TextDecoration.lineThrough,
);
}
// 覆蓋此函數(shù)以構(gòu)建控件
@override
Widget build(BuildContext context) {
// 返回值:創(chuàng)建列表項,通常包含圖標(biāo)和一些文本
return new ListItem(
// 當(dāng)用戶點擊此列表項時調(diào)用
onTap: () {
// 調(diào)用對目標(biāo)的改變函數(shù)
onTargetChanged(target, !nowTarget);
},
// 要在標(biāo)題之前顯示的控件:創(chuàng)建圓形頭像控件
leading: new CircleAvatar(
// 填充圓形的顏色:獲得顏色函數(shù)
backgroundColor: _getColor(context),
// 子控件:文字控件
child: new Text('囧'),
),
// 列表項目的主要內(nèi)容:創(chuàng)建堆棧布局控件
title: new Stack(
/*
* 列表項目的主要內(nèi)容:
* 定位位置
* 左邊與頂部
* 文本控件
* 文本內(nèi)容
* 獲得文本樣式函數(shù)
*/
children: <Widget> [
new Positioned(
left: 0.0,
top: 0.0,
child: new Text(
target.name,
style: _getNameTextStyle(context),
)
),
new Positioned(
left: 0.0,
top: 20.0,
child: new Text(
'獎勵'+'\n'+target.reward,
style: _getRewardTextStyle(context),
)
),
]
)
);
}
}
創(chuàng)建achievement_view_list.dart文件,創(chuàng)建列表。
import 'package:flutter/material.dart';
import 'achievement_view_list_item.dart';
// 創(chuàng)建類,成就視圖列表項目,繼承StatefulWidget(有狀態(tài)的控件)
class AchievementViewList extends StatefulWidget {
// 構(gòu)造函數(shù)
AchievementViewList({
// 自變量,目標(biāo)列表
this.targets,
// 控件和元素的標(biāo)識符
Key key,
}) :
// 調(diào)用父類
super(
// 使用父類的控件和元素標(biāo)識符
key: key
);
// 最終值,目標(biāo)列表
final List<Target> targets;
/*
* 覆蓋具有相同名稱的超類成員
* 在樹中的給定位置為此控件創(chuàng)建可變狀態(tài)
* 子類應(yīng)重寫此方法以返回其關(guān)聯(lián)的State子類新創(chuàng)建的實例
*/
@override
_AchievementViewState createState() => new _AchievementViewState();
}
/*
* 關(guān)聯(lián)State子類的實例
* 繼承State:StatefulWidget(有狀態(tài)的控件)邏輯和內(nèi)部狀態(tài)
*/
class _AchievementViewState extends State<AchievementViewList> {
// 類成員,存儲成就集合
Set<Target> _achievements = new Set<Target>();
/*
* 類函數(shù),成就改變
* target:傳遞目標(biāo)
* nowTarget:是否新目標(biāo)
*/
void _achievementsChanged(Target target, bool nowTarget) {
// 通知框架此對象的內(nèi)部狀態(tài)已更改
setState((){
/*
* 如果是新目標(biāo)
* 存儲成就集合,增加目標(biāo)
* 否則,移除目標(biāo)
*/
if (nowTarget)
_achievements.add(target);
else
_achievements.remove(target);
});
}
// 覆蓋此函數(shù)以構(gòu)建依賴于動畫的當(dāng)前狀態(tài)的控件
@override
Widget build(BuildContext context) {
// 返回值,創(chuàng)建包含列表項的可滾動列表
return new ListTile(
/*
* 要在此列表中顯示的控件
* 迭代當(dāng)前配置的目標(biāo)列表中的目標(biāo)
* 為每一個調(diào)用函數(shù)創(chuàng)建成就目標(biāo)類
*/
children: widget.targets.map(
(Target target) {
// 返回值,創(chuàng)建成就目標(biāo)類
return new AchievementViewItem(
// 傳遞目標(biāo):本輪迭代中的目標(biāo)
target: target,
// 是否新目標(biāo):如果目標(biāo)在成就集合中,則返回true
nowTarget: _achievements.contains(target),
// 對目標(biāo)的改變:類函數(shù),成就改變
onTargetChanged: _achievementsChanged,
);
}
).toList()
);
}
}
創(chuàng)建achievement_view.dart文件,傳遞列表中顯示的數(shù)據(jù)。
import 'package:flutter/material.dart';
import 'achievement_view_list.dart';
import 'achievement_view_list_item.dart';
class AchievementView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new AchievementViewList(targets: _kTargets);
}
}
final List<Target> _kTargets = <Target>[
new Target(name: '生存100天', reward: "金錢¥2500\t最高能量+20"),
new Target(name: '大學(xué)畢業(yè)', reward: "獲得畢業(yè)學(xué)位\t金錢¥5000\t最高情緒+30"),
new Target(name: '獲得¥5000', reward: "獲得信用卡"),
new Target(name: '購買廉價的公寓', reward: "最高能量+60\t最高饑餓度+30"),
new Target(name: '購買普通的公寓', reward: "最高能量+80\t最高饑餓度+50"),
new Target(name: '生存100天', reward: "金錢¥2500\t最高能量+20"),
new Target(name: '大學(xué)畢業(yè)', reward: "獲得畢業(yè)學(xué)位\t金錢¥5000\t最高情緒+30"),
new Target(name: '獲得¥5000', reward: "獲得信用卡"),
new Target(name: '購買廉價的公寓', reward: "最高能量+60\t最高饑餓度+30"),
new Target(name: '購買普通的公寓', reward: "最高能量+80\t最高饑餓度+50"),
];

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android網(wǎng)絡(luò)監(jiān)聽和網(wǎng)絡(luò)判斷示例介紹
大家好,本篇文章主要講的是Android網(wǎng)絡(luò)監(jiān)聽和網(wǎng)絡(luò)判斷示例介紹,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下,方便下次瀏覽2021-12-12
Android布局控件View?ViewRootImpl?WindowManagerService關(guān)系
這篇文章主要為大家介紹了Android布局控件View?ViewRootImpl?WindowManagerService關(guān)系示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
Android開發(fā)之ContentProvider的使用詳解
本篇文章介紹了Android開發(fā)之ContentProvider的使用詳解。需要的朋友參考下2013-04-04
Android實現(xiàn) Shape屬性gradient 漸變效果
這篇文章主要介紹了Android 實現(xiàn)Shape屬性gradient 漸變效果,gradient用以定義漸變色,可以定義兩色漸變和三色漸變,及漸變樣式,具體實現(xiàn)代碼感興趣的朋友跟隨小編一起看看吧2019-11-11
Android 使用 Path 實現(xiàn)搜索動態(tài)加載動畫效果
這篇文章主要介紹了Android 使用 Path 實現(xiàn)搜索動態(tài)加載動畫效果,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-08-08

