Flutter 질감 디자인 의 목록 항목

본 고 는 Flutter 실현 목록 항목 의 구체 적 인 코드 를 공유 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
업적 만 들 기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(
   //        ：16.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(
   //        ：13.0
   fontSize: 13.0,
   //           ：  
   color: Colors.black,
  );
  //         
  return new TextStyle(
   //        ：13.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(
        '  '+'
'+target.reward,
        style: _getRewardTextStyle(context),
       )
     ),
    ]
   )
  );
 }
}

업적 만 들 기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()
  );
 }
}

업적 만 들 기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"),
];

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.