Flutter 위 챗 모멘트 기능 구현

본 논문 의 사례 는 Flutter 가 위 챗 모멘트 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
오늘 위 챗 모멘트 의 효 과 를 보 여 드 리 겠 습 니 다.다음은 효과 도 입 니 다.

다음은 그대로 입 니 다.코드 로 설명 하 시 겠 습 니까?

import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:nursery_school_gardener/view/main/dynamic/FriendView/FriendCell.dart';
 
 
class Dynamic extends StatefulWidget {
  @override
  _DynamicState createState() => _DynamicState();
}
 
class _DynamicState extends State<Dynamic> {
  //        
  List<Result> cachesData;
  @override
  void initState() {
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      contentWidget: Expanded(
          flex: 1,
          child: ListView.builder(//      
          itemBuilder: (BuildContext context, int index) {
            //        
            return FriendCell(
              result: cachesData[index],//           
            );
          },
          itemCount: cachesData.length(),
        ),
      ),
    );
  }
 
}
위 는 목록 이 고 아래 는 목록 의 모든 스타일 입 니 다.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:nursery_school_gardener/util/ColorUtils.dart';
 
 
class FriendCell extends StatefulWidget {
  //          
  Result result;
  FriendCell({this.result, Key key}) : super(key: key);
  @override
  _FriendCellState createState() => _FriendCellState();
}
 
class _FriendCellState extends State<FriendCell> {
  TextEditingController editingController = new TextEditingController();
  //       ,1 、2|4 、    
  Widget makePictureCount(List<KgPhotosList> pics) {
    if (pics.length == 1) {
      return GestureDetector(
        onTap: () {
          //    
        },
        child: Container(
          margin: EdgeInsets.fromLTRB(0, 10, 50, 10),
          width: MediaQuery.of(context).size.width - 164,
          height: (MediaQuery.of(context).size.width - 164) / 2,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/hsf2.jpg"),//               
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      );
    } else if (pics.length == 4 || pics.length == 2) {
      return Container(
        margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
        child: Wrap(
          spacing: 5,
          runSpacing: 5,
          alignment: WrapAlignment.start,
          children: pics
              .map(
                (p) => GestureDetector(
                  onTap: () {
                    //    
                  },
                  child: Container(
                    width: (MediaQuery.of(context).size.width - 164) / 2.2,
                    height: (MediaQuery.of(context).size.width - 164) / 2.2,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/hsf2.jpg"),//               
                        fit: BoxFit.cover,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              )
              .toList(),
        ),
      );
    } else if (pics.length == 3 || pics.length > 4) {
      
      return Container(
        margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
        child: Wrap(
          spacing: 5,
          runSpacing: 5,
          alignment: WrapAlignment.start,
          children: pics
              .map(
                (p) => GestureDetector(
                  onTap: () {
                    //    
                  },
                  child: Container(
                     width: (MediaQuery.of(context).size.width - 164) / 3,
                     height: (MediaQuery.of(context).size.width - 164) / 3,
                     decoration: BoxDecoration(
                        image: DecorationImage(
                           image:AssetImage("images/hsf2.jpg"),//           
                         fit: BoxFit.cover,
                       ),
                        borderRadius: BorderRadius.circular(8),
                     ),
                  ),
                ),
              )
              .toList(),
        ),
      );
    } else {
      return Container();
    }
  }
 
  bool _isShow = true;
 
  @override
  Widget build(BuildContext context) {
    bool deleteStatus = widget.result.addTeacher !=
        Variable.share().loginData.result.userInfo.id;
    return Container(
      margin: new EdgeInsets.only(left: 12, right: 12, bottom: 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: ColorUtils.WHITE,
        boxShadow: [
          BoxShadow(
              color: ColorUtils.MAIN_BG, blurRadius: 10.0, spreadRadius: 1.0),
        ],
      ),
      child: Stack(
        children: [
          Container(
            child: Column(
              children: <Widget>[
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    //  
                    Container(
                      width: 40,
                      height: 40,
                      margin: EdgeInsets.fromLTRB(15, 20, 15, 0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage("images/hsf2.jpg"),//    
                          fit: BoxFit.cover,
                        ),
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.fromLTRB(0, 20, 60, 0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
//  
 Text(
      "  ",
           style: TextStyle(
                      fontSize: 17,
                      color: Color(0XFF4D6CAB),
                      fontWeight: FontWeight.w500),
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            //    
                            Text(
                              "  ",
                              style: TextStyle(fontSize: 15),
                            ),
                            SizedBox(
                              height: 5,
                            ),
//     ,          
    makePictureCount(widget.result.kgPhotosList),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
Stack(
     children: [
             Flex(
                 direction: Axis.horizontal,
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: <Widget>[
//     
                 Container(
                     margin: EdgeInsets.only(left: 70, bottom: 5),
                        child: Text(
                            "  ",
                            style: TextStyle(
                                fontSize: 12, color: Color(0XFFB2B2B2)),
                          ),
                        ),
//        deleteStatus           ,     ,
      Offstage(
              offstage: deleteStatus,
              child: GestureDetector(
                     onTap: () {
                              CustomDialog.show(context,
                                  title: "    ",
                                  message: "           ?", callBack: (flag) {
                                if (flag) {
                                  delteDynamic();
                                }
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "  ",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
//       ,       ,          
  Offstage(
        offstage: ToolUtils.isContainsElement(
                  Variable.share().USER_DYNAMIC_TYPE),
                          child: GestureDetector(
                            onTap: () {
                              CustomDialog.show(
                                context,
                                title: "    ",
                                message: "           ?",
                                callBack: (flag) {
                                  if (flag) {}
                                },
                              );
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "  ",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
//       ,       ,          
     Offstage(
           offstage: ToolUtils.isContainsElement(
               Variable.share().USER_DYNAMIC_TYPE),
           child: GestureDetector(
                 onTap: () {
                  CustomInputDialog.show(context,
                    title: "    ",
                  message: "           ?", callBack: (flag) {
                                if (flag) {}
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "  ",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
  Container(
       margin: EdgeInsets.only(right: 20),
          child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
               Offstage(
                 offstage: _isShow,
                    child: AnimatedContainer(
                         decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                                  color: Color(0XFF4C5154)),
                       duration: Duration(milliseconds: 100),
                         width: 130,
                      height: 30,
                 child: Flex(
          direction: Axis.horizontal,
children: <Widget>[
//     
   Expanded(
             flex: 1,
              child: Row(
                     mainAxisAlignment:
                     MainAxisAlignment.center,
                          children: <Widget>[
                                 Icon(
                                  Icons.favorite_border,
                                  color: Colors.white,
                                  size: 15,
                                ),
                               SizedBox(
                            width: 5,
                   ),
              InkWell(
     onTap: () {
 //     
         setState(
                 () {
              isShow();
               addPraise();
                   },
                   );
                  },
              child: Text(
               " ",
                 style: TextStyle(
                      color: Colors.white,
                        fontSize: 12),
                    ),
              ),
         ],
     ),
 ),
//     
 Expanded(
       flex: 1,
       child: Row(
       mainAxisAlignment:
       MainAxisAlignment.center,
       children: <Widget>[
            Icon(
                   Icons.sms,
                   color: Colors.white,
                    size: 15,
                            ),
                             SizedBox(
                           width: 5,
                          ),
                            InkWell(
                            onTap: () {
                               setState(
                                 () {
                                  isShow();
                                   addDiscuss("      ");
                                    },
                               );
                            },
                          child: Text(
                                   "  ",
                                 style: TextStyle(
                                     color: Colors.white,
                                  fontSize: 12),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
     ),
          SizedBox(
            width: 10,
               ),
                  InkWell(
                     onTap: () {
                     isShow();
                            },
                            child: Image.asset(
                              "images/button.png",
                              width: 22,
                              height: 18,
                            ),
                          ),
                        ],
               ),
            ),
       ],
   ),
//    
 Offstage(
    offstage:
             widget.result.kgPraiseList.length == 0 ? true : false,
                  child: Container(
                    constraints: BoxConstraints(minWidth: double.infinity),
                    margin: EdgeInsets.fromLTRB(70, 10, 15, 0),
                    padding:
                        EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
//            ,                   ,  UI
    decoration: BoxDecoration(
       borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(8),
                 topRight: Radius.circular(8),
                 bottomLeft: Radius.circular(
                              widget.result.kgDiscussList.length == 0 ? 8 : 0),
                          bottomRight: Radius.circular(
                              widget.result.kgDiscussList.length == 0 ? 8 : 0)),
                      color: Color(0XFFF3F3F5),
                    ),
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        runSpacing: 5,
                        spacing: 5,
                        children: likeView(widget.result.kgPraiseList.length)),
                  ),
                ),
//    
   Offstage(
    offstage:
         widget.result.kgDiscussList.length == 0 ? true : false,
              child: Container(
                    constraints: BoxConstraints(minWidth: double.infinity),
                    margin: EdgeInsets.fromLTRB(70, 0, 15, 0),
                    padding:
                        EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
                    //            ,                   ,  UI
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(
                              widget.result.kgPraiseList.length == 0 ? 8 : 0),
                          topRight: Radius.circular(
                              widget.result.kgPraiseList.length == 0 ? 8 : 0),
                          bottomLeft: Radius.circular(8),
                          bottomRight: Radius.circular(8)),
                      color: Color(0XFFF3F3F5),
                    ),
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        runSpacing: 5,
                        spacing: 5,
                        children: talkView(widget.result.kgDiscussList.length)),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
              ],
            ),
          ),
          Offstage(
            offstage: true,
            child: Container(
              margin: new EdgeInsets.only(
                  left: MediaQuery.of(context).size.width - 50, top: 20),
              child: Image.asset(
                "images/ic_no_network.png",
                width: 18,
                height: 18,
              ),
            ),
          ),
        ],
      ),
    );
  }
 
  //            
  void isShow() {
    setState(() {
      _isShow = !_isShow;
    });
  }
 
  /*
  *      
  * */
  void delteDynamic() {
    //      
  }
 
  /*
  *     
  * */
  void addDiscuss(String discuss) {
    //     
  }
 
  /*
  *   
  * */
  void addPraise() {
    //   
  }
    
  //  
  List<Widget> likeView(int count) {
    List<Widget> result = [];
    // TODO:       ,          ,             ,           ,       
    /*
    for (int i = 0; i < count; i++) {
      var praise = widget.result.kgPraiseList[i];
      result.add(
        Container(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                Icons.favorite_border,
                size: 13,
                color: Color(0XFF566B94),
              ),
              SizedBox(width: 5),
              Container(
                child: Text(
                  ToolUtils.isEmptyOrNull(praise.praisePerson),
                  style: TextStyle(
                      color: Color(0XFF566B94),
                      fontSize: 15,
                      fontWeight: FontWeight.w500),
                ),
              )
            ],
          ),
        ),
      );
    }
     */
    //     
    if (widget.result.kgPraiseList.length > 0) {
      result.add(
        Container(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                Icons.favorite,
                size: 16,
                color: Color(0XFF4D6CAB),
              ),
              SizedBox(width: 5),
              Container(
                child: Text(
                  "${widget.result.kgPraiseList.length}   ",
                  style: TextStyle(
                      color: Color(0XFF4D6CAB),
                      fontSize: 14,
                      fontWeight: FontWeight.w500),
                ),
              )
            ],
          ),
        ),
      );
    }
    return result;
  }
  //  
  List<Widget> talkView(int count) {
    List<Widget> result = [];
    for (int i = 0; i < count; i++) {
      var discuss = widget.result.kgDiscussList[i];
      var rng = new Random();
      result.add(
        Container(
          child: Flex(
            direction: Axis.vertical,
            children: [
              Container(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text.rich(
                        TextSpan(
                            style: TextStyle(
                              fontSize: 15,
                              color: Color(0xFF333333),
                            ),
                            children: [
                              TextSpan(
                                text: ToolUtils.isEmptyOrNull(
                                        discuss.discussPerson) +
                                    ':',
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  color: Color(0XFF4D6CAB),
                                ),
                              ),
                              TextSpan(
                                  text: ToolUtils.isEmptyOrNull(
                                      discuss.discussMessage)),
                            ]),
                        textAlign: TextAlign.start,
                      ),
                    ),
                  ],
                ),
              ),
              Container(),
            ],
          ),
        ),
      );
    }
    return result;
  }
}
이 친구 권 효과 의 실현 이 이 루어 졌 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기