使用Flutter怎么實現一個列表項

使用Flutter怎么實現一個列表項？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

創建achievement_view_list_item.dart文件，具體的實現每一個列表項。

import 'package:flutter/material.dart';
// 創建類，成就目標
class Target {
 // 常量，構建函數
 const Target({
  // 自變量，目標名稱
  this.name,
  // 自變量，目標獎勵
  this.reward
 });
 // 最終值，成就目標名稱
 final String name;
 // 最終值，成就目標獎勵
 final String reward;
}
// 定義數據類型，目標改變回調
typedef void TargetChangedCallback(
 // 類型參數，目標
 Target target,
 // 類型參數，是否新目標
 bool nowTarget
);
// 創建類，成就視圖列表項目，繼承StatelessWidget（無狀態的控件）
class AchievementViewItem extends StatelessWidget {
 // 構造函數
 AchievementViewItem({
  // 目標參數，傳遞目標
  Target target,
  // 自變量，是否新目標
  this.nowTarget,
  // 自變量，對目標的改變
  this.onTargetChanged
 }) :
  // 接收傳遞的目標
  target = target,
  // 調用父類
  super(
   /*
    * 控件和元素的標識符：
    * 將其對象的標識用作其值
    * 用于將控件的標識綁定到用于生成該控件的對象的標識
    */
   key: new ObjectKey(target)
  );
 // 類成員，存儲目標
 final Target target;
 // 類成員，存儲是否新目標
 final bool nowTarget;
 // 類成員，對目標的改變
 final TargetChangedCallback onTargetChanged;
 // 類函數，獲得顏色
 Color _getColor(BuildContext context) {
  /*
   * 是否新目標
   *  是：返回灰色
   *  否：返回主題的背景色
   */
  return nowTarget ? Colors.black54 : Theme.of(context).primaryColor;
 }
 // 類函數，獲得文本樣式
 TextStyle _getNameTextStyle(BuildContext context) {
  // 如果不是新目標，返回文本樣式控件
  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,
  );
 }
 // 類函數，獲得文本樣式
 TextStyle _getRewardTextStyle(BuildContext context) {
  // 如果不是新目標，返回文本樣式控件
  if (!nowTarget) return new TextStyle(
   // 繪制文本的大?。?3.0
   fontSize: 13.0,
   // 繪制文本時使用的顏色：黑色
   color: Colors.black,
  );
  // 返回文本樣式控件
  return new TextStyle(
   // 繪制文本的大?。?3.0
   fontSize: 13.0,
   // 繪制文本時使用的顏色：灰色
   color: Colors.black54,
   // 在文本附近繪制的裝飾：文本中繪制一條橫線
   decoration: TextDecoration.lineThrough,
  );
 }
 // 覆蓋此函數以構建控件
 @override
 Widget build(BuildContext context) {
  // 返回值：創建列表項，通常包含圖標和一些文本
  return new ListItem(
   // 當用戶點擊此列表項時調用
   onTap: () {
    // 調用對目標的改變函數
    onTargetChanged(target, !nowTarget);
   },
   // 要在標題之前顯示的控件：創建圓形頭像控件
   leading: new CircleAvatar(
    // 填充圓形的顏色：獲得顏色函數
    backgroundColor: _getColor(context),
    // 子控件：文字控件
    child: new Text('囧'),
   ),
   // 列表項目的主要內容：創建堆棧布局控件
   title: new Stack(
    /*
     * 列表項目的主要內容：
     * 定位位置
     *  左邊與頂部
     * 文本控件
     *  文本內容
     *  獲得文本樣式函數
     */
    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),
       )
     ),
    ]
   )
  );
 }
}

創建achievement_view_list.dart文件，創建列表。

import 'package:flutter/material.dart';
import 'achievement_view_list_item.dart';
// 創建類，成就視圖列表項目，繼承StatefulWidget（有狀態的控件）
class AchievementViewList extends StatefulWidget {
 // 構造函數
 AchievementViewList({
  // 自變量，目標列表
  this.targets,
  // 控件和元素的標識符
  Key key,
 }) :
  // 調用父類
  super(
   // 使用父類的控件和元素標識符
   key: key
  );
 // 最終值，目標列表
 final List<Target> targets;
 /*
  * 覆蓋具有相同名稱的超類成員
  * 在樹中的給定位置為此控件創建可變狀態
  * 子類應重寫此方法以返回其關聯的State子類新創建的實例
  */
 @override
 _AchievementViewState createState() => new _AchievementViewState();
}
/*
 * 關聯State子類的實例
 * 繼承State：StatefulWidget（有狀態的控件）邏輯和內部狀態
 */
class _AchievementViewState extends State<AchievementViewList> {
 // 類成員，存儲成就集合
 Set<Target> _achievements = new Set<Target>();
 /*
  * 類函數，成就改變
  * target：傳遞目標
  * nowTarget：是否新目標
  */
 void _achievementsChanged(Target target, bool nowTarget) {
  // 通知框架此對象的內部狀態已更改
  setState((){
   /*
    * 如果是新目標
    * 存儲成就集合，增加目標
    * 否則，移除目標
    */
   if (nowTarget)
    _achievements.add(target);
   else
    _achievements.remove(target);
  });
 }
 // 覆蓋此函數以構建依賴于動畫的當前狀態的控件
 @override
 Widget build(BuildContext context) {
  // 返回值，創建包含列表項的可滾動列表
  return new ListTile(
   /*
    * 要在此列表中顯示的控件
    * 迭代當前配置的目標列表中的目標
    * 為每一個調用函數創建成就目標類
    */
   children: widget.targets.map(
    (Target target) {
     // 返回值，創建成就目標類
     return new AchievementViewItem(
      // 傳遞目標：本輪迭代中的目標
      target: target,
      // 是否新目標：如果目標在成就集合中，則返回true
      nowTarget: _achievements.contains(target),
      // 對目標的改變：類函數，成就改變
      onTargetChanged: _achievementsChanged,
     );
    }
   ).toList()
  );
 }
}

創建achievement_view.dart文件，傳遞列表中顯示的數據。

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: '大學畢業', reward: "獲得畢業學位\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: '大學畢業', reward: "獲得畢業學位\t金錢￥5000\t最高情緒+30"),
 new Target(name: '獲得￥5000', reward: "獲得信用卡"),
 new Target(name: '購買廉價的公寓', reward: "最高能量+60\t最高饑餓度+30"),
 new Target(name: '購買普通的公寓', reward: "最高能量+80\t最高饑餓度+50"),
];

看完上述內容，你們掌握使用Flutter怎么實現一個列表項的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！