Flutter質(zhì)感設(shè)計(jì)之列表項(xiàng)

更新時(shí)間：2018年08月23日 10:46:05 作者：何小有

這篇文章主要為大家詳細(xì)介紹了Flutter質(zhì)感設(shè)計(jì)之列表項(xiàng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了Flutter實(shí)現(xiàn)列表項(xiàng)的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)建achievement_view_list_item.dart文件，具體的實(shí)現(xiàn)每一個(gè)列表項(xiàng)。

import 'package:flutter/material.dart';
// 創(chuàng)建類，成就目標(biāo)
class Target {
 // 常量，構(gòu)建函數(shù)
 const Target({
  // 自變量，目標(biāo)名稱
  this.name,
  // 自變量，目標(biāo)獎(jiǎng)勵(lì)
  this.reward
 });
 // 最終值，成就目標(biāo)名稱
 final String name;
 // 最終值，成就目標(biāo)獎(jiǎng)勵(lì)
 final String reward;
}
// 定義數(shù)據(jù)類型，目標(biāo)改變回調(diào)
typedef void TargetChangedCallback(
 // 類型參數(shù)，目標(biāo)
 Target target,
 // 類型參數(shù)，是否新目標(biāo)
 bool nowTarget
);
// 創(chuàng)建類，成就視圖列表項(xià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,
   // 繪制文本時(shí)使用的顏色：黑色
   color: Colors.black,
   // 繪制文本時(shí)加粗字體
   fontWeight: FontWeight.bold,
  );
  // 返回文本樣式控件
  return new TextStyle(
   fontSize: 16.0,
   // 繪制文本時(shí)使用的顏色：灰色
   color: Colors.black54,
   // 繪制文本時(shí)加粗字體
   fontWeight: FontWeight.bold,
   // 在文本附近繪制的裝飾：文本中繪制一條橫線
   decoration: TextDecoration.lineThrough,
  );
 }
 // 類函數(shù)，獲得文本樣式
 TextStyle _getRewardTextStyle(BuildContext context) {
  // 如果不是新目標(biāo)，返回文本樣式控件
  if (!nowTarget) return new TextStyle(
   // 繪制文本的大?。?3.0
   fontSize: 13.0,
   // 繪制文本時(shí)使用的顏色：黑色
   color: Colors.black,
  );
  // 返回文本樣式控件
  return new TextStyle(
   // 繪制文本的大?。?3.0
   fontSize: 13.0,
   // 繪制文本時(shí)使用的顏色：灰色
   color: Colors.black54,
   // 在文本附近繪制的裝飾：文本中繪制一條橫線
   decoration: TextDecoration.lineThrough,
  );
 }
 // 覆蓋此函數(shù)以構(gòu)建控件
 @override
 Widget build(BuildContext context) {
  // 返回值：創(chuàng)建列表項(xiàng)，通常包含圖標(biāo)和一些文本
  return new ListItem(
   // 當(dāng)用戶點(diǎn)擊此列表項(xiàng)時(shí)調(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('囧'),
   ),
   // 列表項(xiàng)目的主要內(nèi)容：創(chuàng)建堆棧布局控件
   title: new Stack(
    /*
     * 列表項(xiàng)目的主要內(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(
        '獎(jiǎng)勵(lì)'+'\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)建類，成就視圖列表項(xià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)建的實(shí)例
  */
 @override
 _AchievementViewState createState() => new _AchievementViewState();
}
/*
 * 關(guān)聯(lián)State子類的實(shí)例
 * 繼承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)建包含列表項(xiàng)的可滾動列表
  return new ListTile(
   /*
    * 要在此列表中顯示的控件
    * 迭代當(dāng)前配置的目標(biāo)列表中的目標(biāo)
    * 為每一個(gè)調(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: '購買廉價(jià)的公寓', 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: '購買廉價(jià)的公寓', reward: "最高能量+60\t最高饑餓度+30"),
 new Target(name: '購買普通的公寓', reward: "最高能量+80\t最高饑餓度+50"),
];