溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-06-09 17:19:48 來源:億速云 閱讀:253 作者:Leah 欄目:移動開發

使用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怎么實現一個列表項的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女