flutter的列表的关注变化

已于 2022-05-17 14:19:57 修改
阅读量329 收藏
点赞数
分类专栏： 安卓 文章标签： flutter
于 2022-05-16 18:33:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44911775/article/details/124805424
版权

参考一
参考二
首先是关注按键的方法体

  Widget _buildRow(itemID) {//在listview里面调用这个方法，并且传值进来
    print("自己关注的ID列表：${userFocusId}，传过来的itemID：${itemID}");
    //每个item都会调用一次_buildRow。

    bool alreadySaved = userFocusId
        .contains(itemID.toString()); //是否包含，包含就返回true，不包含就返回false

    print("真假${alreadySaved}");
    return GestureDetector(
        onTap: () {
          setState(() {
            focus(itemID, alreadySaved);//点击的时候调用关注接口
          });
          setState(() {

          });
        },
        child: Container(
          margin: EdgeInsets.only(right: 15, top: 15),
          padding: EdgeInsets.only(left: 11, right: 11, top: 7, bottom: 7),
          decoration: alreadySaved
              ? BoxDecoration(
                  color: Color(0xFF373737),
                  borderRadius: BorderRadius.circular(8))
              : BoxDecoration(
                  color: Color(0xFF37AD5E),
                  borderRadius: BorderRadius.circular(8)),
          child: alreadySaved
              ? Text(
                  "已關注",
                  style: TextStyle(color: Color(0xFF999999), fontSize: 12),
                )
              : Text(
                  "+關注",
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
        ));
  }

关注接口

  //关注接口
  focus(id, alreadySaved) async {
    var apiUrl = "http://47.242.63.216:9527/v1/focus/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    map["user_id"] = id;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(nickname);
    //如果成功就吐司
    if (httpRes.code == 200) {
      getFocusListDataMethod();
      if (alreadySaved == true) {//判断传进来的值是true还是false，然后吐司相应的内容
        setState(() {

        });
        Fluttertoast.showToast(
            msg: "已取消关注",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      } else if (alreadySaved == false) {
        setState(() {

        });
        Fluttertoast.showToast(
            msg: "关注成功",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      }
    }
  }

获取关注接口
List userFocusId = [];

//获取关注列表接口
  getFocusListDataMethod() async {
    var apiUrl = "http://47.242.63.216:9527/v1/focus/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = GetFocusListData.fromJson(nickname);
    print("${httpRes.data.list.length}");
    //如果成功就吐司
    if (httpRes.code == 200) {
      userFocusId.clear();//先清理列表
      if (httpRes.data.list.length > 0) {
        for (int i = 0; i < httpRes.data.list.length; i++) {
          userFocusId.add(httpRes.data.list[i].userId.toString());//for循环不断添加数据
          setState(() {
            userFocusId;//然后刷新数据
          });
          print("关注的ID${userFocusId.toString()}");
        }
      }else{
        setState(() {
          userFocusId;//长度为0也刷新数据
        });
      }
    }
  }

初始化的时候

  @override
  void initState() {
    super.initState();
    getMomentLists();
    getFocusListDataMethod();
    setState(() {

    });
  }

全部代码

import 'dart:convert';
import 'dart:developer';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:music/Utils/StringUtil.dart';
import 'package:music/data/GetMomentList.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'DynamicDetails.dart';
import 'Utils/AsperctRaioImage.dart';
import 'PullBlackList.dart';
import 'data/AuthCode.dart';
import 'data/GetFocusListData.dart';

class DynamicRecommendNav extends StatefulWidget {
  const DynamicRecommendNav({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new Page();
  }
}

class Page extends State<DynamicRecommendNav> {
  //不知道什么类型就用var
  var _items = [];
  bool isSettings = true;
  bool focusButton = false;
  int _userId = 0;
  List<String> userFocusId = [];

  @override
  Widget build(BuildContext context) {
//通过下面这种方法解决多图片问题
//     if (_items.length == 0) {
//       return layout1(context);
//     } else if (_items.length == 3) {
//       return layout(context);
//     } else {
    return layout(context);
    // }
  }

  @override
  void initState() {
    super.initState();
    getMomentLists();
    getFocusListDataMethod();
    setState(() {

    });
  }

  //关注接口
  focus(id, alreadySaved) async {
    var apiUrl = "http://47.242.63.216:9527/v1/focus/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    map["user_id"] = id;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(nickname);
    //如果成功就吐司
    if (httpRes.code == 200) {
      getFocusListDataMethod();
      if (alreadySaved == true) {
        setState(() {

        });
        Fluttertoast.showToast(
            msg: "已取消关注",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      } else if (alreadySaved == false) {
        setState(() {

        });
        Fluttertoast.showToast(
            msg: "关注成功",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      }
    }
  }

  //关注接口
  cancelFocus(id) async {
    var apiUrl = "http://47.242.63.216:9527/v1/focus/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    map["user_id"] = id;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(nickname);
    //如果成功就吐司
    if (httpRes.code == 200) {
      getFocusListDataMethod();
      Fluttertoast.showToast(
          msg: "已取消关注",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIosWeb: 10,
          backgroundColor: Colors.white,
          textColor: Colors.black,
          fontSize: 16.0);
    }
  }

  //拉黑接口
  pullBlack(var id) async {
    var apiUrl = "http://47.242.63.216:9527/v1/blacklist/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //昵称从输入框里面获取
    map["user_id"] = id;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> blackList = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(blackList);
    //如果成功就吐司
    if (httpRes.code == 200) {
      Fluttertoast.showToast(
          msg: "拉黑或取消拉黑对象：${id}",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 10,
          backgroundColor: Colors.white,
          textColor: Colors.black,
          fontSize: 16.0);
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const PullBlackList()),
      );
    }
  }

//对评论进行点赞
  momentLike(var momentId) async {
    var apiUrl = "http://47.242.63.216:9527/v1/moment/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //昵称从输入框里面获取
    map["moment_id"] = momentId;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> blackList = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(blackList);
    //如果成功就吐司
    if (httpRes.code == 200) {
      Fluttertoast.showToast(
          msg: "点赞：${momentId}",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 10,
          backgroundColor: Colors.white,
          textColor: Colors.black,
          fontSize: 16.0);
    }
  }

  //获取关注列表接口
  getFocusListDataMethod() async {
    var apiUrl = "http://47.242.63.216:9527/v1/focus/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = GetFocusListData.fromJson(nickname);
    print("${httpRes.data.list.length}");
    //如果成功就吐司
    if (httpRes.code == 200) {
      userFocusId.clear();
      if (httpRes.data.list.length > 0) {
        for (int i = 0; i < httpRes.data.list.length; i++) {
          userFocusId.add(httpRes.data.list[i].userId.toString());
          setState(() {
            userFocusId;
          });
          print("关注的ID${userFocusId.toString()}");
        }
      }else{
        setState(() {
          userFocusId;
        });
      }
    }
  }

  //获取动态列表接口
  getMomentLists() async {
    var apiUrl = "http://47.242.63.216:9527/v1/moment/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //动态ID，0就是最新的
    map["moment_id"] = 0;
    map["page_size"] = 5;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    log(result.toString());

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = GetMomentList.fromJson(nickname);
    //如果成功就吐司
    if (httpRes.code == 200) {
      setState(() {
        //将list字段的内容赋值给全局变量_items
        _items = httpRes.data.list;
        log(_items.length.toString());
      });
    }
  }

  Widget layout(BuildContext context) {
    return new Scaffold(
      body: Container(
        //设置界面背景
        decoration: const BoxDecoration(
          color: Color(0xFF1F1F1F),
        ),
        //使用ListView.builder创建列表
        child:
            ListView.builder(itemCount: _items.length, itemBuilder: itemView),
      ),
    );
  }

  Widget layout1(BuildContext context) {
    return new Scaffold(
      body:
          //使用ListView.builder创建列表
          new ListView.builder(
              itemCount: _items.length, itemBuilder: itemView1),
    );
  }

  //发动态的文字
  Row dynamicTxtSection(String text) {
    return Row(
      children: [
        Container(
          margin: EdgeInsets.only(left: 16, bottom: 5),
          child: Text(
            text,
            style: TextStyle(color: Color(0xFFBBBBBB), fontSize: 16),
          ),
        )
      ],
    );
  }

  //地点行
  Widget placeSection(String area) {
    return Row(
      children: [
        GestureDetector(
            child: Container(
          margin: const EdgeInsets.only(left: 15.0),
          child: Text(
            area,
            style: TextStyle(color: Color(0xFF888888)),
          ),
        )),
      ],
    );
  }

  //互动行
  Widget interactiveSection(int id) {
    return Container(
      margin: const EdgeInsets.only(top: 25.0, left: 15.0, bottom: 22.0),
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              //判断如果点赞就判断自己的ID号好动态列表里面的点赞ID是否相同，有就设置为ture，还有就是为什么图片可以，这边不可以，找一下区别
              if (1 == 1) {}
              setState(() {
                getMomentLists();
                isSettings = !isSettings;
              });
              momentLike(id);
            },
            child: Row(
              children: [
                Container(
                  width: 25.0,
                  child: Image.asset(
                    isSettings
                        ? "assets/base_widgets/icon_dynamic_recom_like.png"
                        : "assets/base_widgets/icon_dynamic_liked.png",
                    fit: BoxFit.fitWidth,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(left: 6.0, right: 24.0),
                  child: Text(
                    "996",
                    style: TextStyle(color: Color(0xFFBBBBBB)),
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            onTap: () {
              //跳转到动态详情界面
              // Navigator.push(
              //   context,
              //   MaterialPageRoute(
              //       builder: (context) => DynamicDetails()),
              // );
              //带参数跳转
              Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                return DynamicDetails(
                  //手机号
                  moment_id: id,
                );
              }));
            },
            child: Container(
              child: Row(
                children: [
                  Container(
                    width: 25.0,
                    child: Image.asset(
                      "assets/base_widgets/icon_dynamic_recom_Comment.png",
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 6.0, right: 24.0),
                    child: Text(
                      "65",
                      style: TextStyle(color: Color(0xFFBBBBBB)),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            width: 25.0,
            child: Image.asset(
              "assets/base_widgets/icon_dynamic_gift_box.png",
              fit: BoxFit.fitWidth,
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 6.0, right: 24.0),
            child: Text(
              "1066",
              style: TextStyle(color: Color(0xFFBBBBBB)),
            ),
          )
        ],
      ),
    );
  }

  //列表的名称
  List<String> SONGNAME = [
    '音乐1',
    '音乐2',
    '音乐3',
  ];

  //动态图片列表方法体
  Widget dynamicItem(String name) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          width: 110,
          height: 110,
          decoration: BoxDecoration(
              color: Colors.grey[300],
              image: DecorationImage(
                  image: NetworkImage(
                      "https://www.itying.com/images/flutter/3.png"),
                  fit: BoxFit.fill),
              borderRadius: BorderRadius.circular(10)),
          margin: const EdgeInsets.only(left: 15.0, bottom: 12.0),
        ),
      ],
    );
  }

  //动态列表第一排
  Widget dynamicListSection() {
    return SizedBox(
      height: 130,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: SONGNAME.map((city) => dynamicItem(city)).toList(),
      ),
    );
  }

  //只有一个图片
  // Widget onePhotoSection(String photo) {
  //   return Container(
  //     width: 200,
  //     height: 250,
  //     decoration: BoxDecoration(
  //       image: DecorationImage(
  //         image: NetworkImage(photo),
  //         fit: BoxFit.contain,
  //       ),
  //     ),
  //   );
  // }
  Widget onePhotoSection(String photo) {
    return Container(
        child:
            AsperctRaioImage.network(photo, builder: (context, snapshot, url) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 16, right: 16, bottom: 5),
            width: snapshot.data.width.toDouble() / 10,
            height: snapshot.data.height.toDouble() / 10,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(url),
                fit: BoxFit.contain,
              ),
            ),
          )
        ],
      );
    }));
  }

  //两个图片
  Widget twoPhotoSection(String photo1, String photo2) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          width: 110,
          height: 110,
          margin: EdgeInsets.only(left: 70, right: 10),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(photo1),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          width: 110,
          height: 110,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(photo2),
              fit: BoxFit.cover,
            ),
          ),
        )
      ],
    );
  }

  //三个图片
  Widget threePhotoSection(String photo1, String photo2, String photo3) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 110,
          height: 110,
          margin: EdgeInsets.only(left: 10, right: 10),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(photo1),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          width: 110,
          height: 110,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(photo2),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          width: 110,
          height: 110,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(photo3),
              fit: BoxFit.cover,
            ),
          ),
        )
      ],
    );
  }

  //四个图片
  Widget fourPhotoSection(
      String photo1, String photo2, String photo3, String photo4) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                color: Colors.white,
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        )
      ],
    );
  }

  //五个图片
  Widget fivePhotoSection(String photo1, String photo2, String photo3,
      String photo4, String photo5) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo5),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        )
      ],
    );
  }

  //六个图片
  Widget sixPhotoSection(String photo1, String photo2, String photo3,
      String photo4, String photo5, String photo6) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo5),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo6),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        )
      ],
    );
  }

  //七个图片
  Widget sevenPhotoSection(String photo1, String photo2, String photo3,
      String photo4, String photo5, String photo6, String photo7) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo5),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo6),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo7),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        )
      ],
    );
  }

  //八个图片
  Widget eightPhotoSection(
      String photo1,
      String photo2,
      String photo3,
      String photo4,
      String photo5,
      String photo6,
      String photo7,
      String photo8) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo5),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo6),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo7),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo8),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        )
      ],
    );
  }

  //八个图片
  Widget ninePhotoSection(
      String photo1,
      String photo2,
      String photo3,
      String photo4,
      String photo5,
      String photo6,
      String photo7,
      String photo8,
      String photo9) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo1),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo2),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo3),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo4),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo5),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo6),
                  fit: BoxFit.cover,
                ),
              ),
            )
          ],
        ),
        Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo7),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo8),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, top: 10, bottom: 5),
              width: 110,
              height: 110,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(photo9),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        )
      ],
    );
  }

  Widget txtSection() {
    return Container(
      child: Text(""),
    );
  }

  Widget _buildRow(itemID) {
    print("自己关注的ID列表：${userFocusId}，传过来的itemID：${itemID}");
    //_buildSuggestions函数都会调用一次_buildRow。 这个函数在ListTile中显示每个新词对

    bool alreadySaved = userFocusId
        .contains(itemID.toString()); //添加 alreadySaved来检查确保单词对还没有添加到收藏夹中

    print("真假${alreadySaved}");
    return GestureDetector(
        onTap: () {
          setState(() {
            focus(itemID, alreadySaved);
          });
          setState(() {

          });
        },
        child: Container(
          margin: EdgeInsets.only(right: 15, top: 15),
          padding: EdgeInsets.only(left: 11, right: 11, top: 7, bottom: 7),
          decoration: alreadySaved
              ? BoxDecoration(
                  color: Color(0xFF373737),
                  borderRadius: BorderRadius.circular(8))
              : BoxDecoration(
                  color: Color(0xFF37AD5E),
                  borderRadius: BorderRadius.circular(8)),
          child: alreadySaved
              ? Text(
                  "已關注",
                  style: TextStyle(color: Color(0xFF999999), fontSize: 12),
                )
              : Text(
                  "+關注",
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
        ));
  }

  //动态列表第二排
  Widget dynamicListSection2() {
    return SizedBox(
      height: 130,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: SONGNAME.map((city) => dynamicItem(city)).toList(),
      ),
    );
  }

  //item方法体
  Widget itemView(BuildContext context, int index) {
    List1 model = this._items[index];
    // getFocusListDataMethod(model.momentInfo.userId);
    _userId = model.momentInfo.userId;
    return new Column(
      children: [
        Container(
          //用decoration的BoxDecoration设置圆角
          decoration: const BoxDecoration(
            //设置背景颜色
            color: Color(0xFF1F1F1F),
          ),
          //左图中的第二个红框部分
          //边距
          margin: const EdgeInsets.only(
            left: 15.0,
          ),
          //内边距
          padding: const EdgeInsets.only(bottom: 10.0), //这个是该容器进行设置边距
          //在这个容器里面放着一行控件
          child: Row(
            //行里的控件
            children: [
              //行的第一个元素控件即头像
              Container(
                width: 50,
                height: 50,
                margin: EdgeInsets.only(right: 15.0),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(model.userInfo.avatar),
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.circular(50),
                ),
              ),
              //行的第二个元素,Expanded相当于设置宽度为0,倍数为1,后面的控件就去到最后面了
              Expanded(
                //Container和Expanded都是只是描述的限制,他们后面的元素都要加child:
                //该部分里面是用列排布的
                child: Column(
                  //设置子项左对齐
                  crossAxisAlignment: CrossAxisAlignment.start,
                  //Row和Column里面是一堆控件,要用children:[]
                  children: [
                    //该行的第一个元素是嵌套的控件,设置一个容器装载
                    Container(
                      margin: const EdgeInsets.only(),
                      //第一个元素当作是一个容器,然后设置边距
                      padding: const EdgeInsets.only(bottom: 8.0),
                      //底部添加8像素填充
                      //列上第一个元素
                      child: Text(
                        //第一个元素
                        '${model.userInfo.nickname}',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color(0xFFFFFFFF),
                            fontSize: 17.0),
                      ),
                    ),
                    //列上的第二个元素是用行来排列的
                    Row(
                      children: [
                        //每个元素一般都是要加上Container的,因为要设置距离
                        Container(
                          padding: const EdgeInsets.only(
                              left: 8.0, right: 8.0, top: 3.0, bottom: 3.0),
                          decoration: BoxDecoration(
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(10.0),
                                topRight: Radius.circular(10.0),
                                bottomLeft: Radius.circular(10.0),
                                bottomRight: Radius.circular(10.0)),
                            color: const Color(0xFFBBA57A),
                            border: Border.all(
                                width: 1, color: const Color(0xFFBBA57A)),
                          ),
                          child: const Text(
                            //第二个元素
                            '認證歌手',
                            style: TextStyle(
                                color: Color(0xFF1F1F1F),
                                fontSize: 12,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.only(
                              top: 3.0, bottom: 3.0, left: 8.0, right: 8.0),
                          margin:
                              const EdgeInsets.only(left: 10.0, right: 10.0),
                          decoration: const BoxDecoration(
                              color: Color(0xFFBBBBBB),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10.0))),
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/base_widgets/icon_dynamic_recom_male.png',
                                width: 13,
                                fit: BoxFit.fitWidth,
                              ),
                              Container(
                                  margin: const EdgeInsets.only(left: 5.0),
                                  child: Text(StringUtils.getAge(
                                      model.userInfo.birthday)))
                            ],
                          ),
                        ),
                        Container(
                          child: Image.asset(
                            'assets/base_widgets/icon_dynamic_recom_grade.png',
                            width: 50,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              // 行的第三个元素
              Container(
                padding: const EdgeInsets.only(bottom: 8.0), //底部添加8像素填充
                child: Column(
                  children: <Widget>[
                    _buildRow(model.userInfo.userId),
                    // if (1 == 1)
                    // GestureDetector(
                    //   onTap: () {
                    //     setState(() {
                    //       focusButton = !focusButton;
                    //     });
                    //     focus(model.userInfo.userId);
                    //   },
                    //   // child: Container(
                    //   //     width: 35.0,
                    //   //     child: Image.asset(
                    //   //       "assets/base_widgets/icon_grey_more.png",
                    //   //       fit: BoxFit.fitWidth,
                    //   //     )),
                    //   child: Container(
                    //     margin: EdgeInsets.only(right: 15, top: 15),
                    //     padding: EdgeInsets.only(
                    //         left: 11, right: 11, top: 7, bottom: 7),
                    //     decoration: BoxDecoration(
                    //         color: Color(0xFF37AD5E),
                    //         borderRadius: BorderRadius.circular(8)),
                    //     child: Text(
                    //       "+關注",
                    //       style: TextStyle(color: Colors.white, fontSize: 12),
                    //     ),
                    //   ),
                    // ),
                    // if (focusButtonState(model.userInfo.userId)==true)
                    //   GestureDetector(
                    //     onTap: () {
                    //       setState(() {
                    //         focusButton=!focusButton;
                    //       });
                    //       cancelFocus(model.userInfo.userId);
                    //     },
                    //     // child: Container(
                    //     //     width: 35.0,
                    //     //     child: Image.asset(
                    //     //       "assets/base_widgets/icon_grey_more.png",
                    //     //       fit: BoxFit.fitWidth,
                    //     //     )),
                    //     child: Container(
                    //       margin: EdgeInsets.only(right: 15, top: 15),
                    //       padding: EdgeInsets.only(
                    //           left: 11, right: 11, top: 7, bottom: 7),
                    //       decoration: BoxDecoration(
                    //           color: Color(0xFF373737),
                    //           borderRadius: BorderRadius.circular(8)),
                    //       child: Text(
                    //         "已關注",
                    //         style: TextStyle(
                    //             color: Color(0xFF999999), fontSize: 12),
                    //       ),
                    //     ),
                    //   ),
                    //空白文字用来顶位置
                    Text(''),
                  ],
                ),
              ),
            ],
          ),
        ),
        dynamicTxtSection(model.momentInfo.text),
        if (model.momentInfo.photos == null) txtSection(),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 1)
          onePhotoSection(model.momentInfo.photos[0]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 2)
          twoPhotoSection(
              model.momentInfo.photos[0], model.momentInfo.photos[1]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 3)
          threePhotoSection(model.momentInfo.photos[0],
              model.momentInfo.photos[1], model.momentInfo.photos[2]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 4)
          fourPhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 5)
          fivePhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3],
              model.momentInfo.photos[4]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 6)
          sixPhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3],
              model.momentInfo.photos[4],
              model.momentInfo.photos[5]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 7)
          sevenPhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3],
              model.momentInfo.photos[4],
              model.momentInfo.photos[5],
              model.momentInfo.photos[6]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 8)
          eightPhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3],
              model.momentInfo.photos[4],
              model.momentInfo.photos[5],
              model.momentInfo.photos[6],
              model.momentInfo.photos[7]),
        if (model.momentInfo.photos != null &&
            model.momentInfo.photos.length == 9)
          ninePhotoSection(
              model.momentInfo.photos[0],
              model.momentInfo.photos[1],
              model.momentInfo.photos[2],
              model.momentInfo.photos[3],
              model.momentInfo.photos[4],
              model.momentInfo.photos[5],
              model.momentInfo.photos[6],
              model.momentInfo.photos[7],
              model.momentInfo.photos[8]),
        placeSection(model.userInfo.area),
        interactiveSection(model.momentInfo.momentId),
        //分割线
        Container(
          margin:
              const EdgeInsets.only(top: 5, bottom: 30.0, left: 15, right: 15),
          height: 1,
          decoration: const BoxDecoration(color: Color(0xFF444444)),
        ),
      ],
    );
  }

  //方法体
  Widget itemView1(BuildContext context, int index) {
    List1 model = this._items[index];
    return new Container(
        color: Color.fromARGB(0x22, 0x49, 0xa9, 0x8d),
        child: new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Column(
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new Text(
                            '${model.momentInfo.userId}年${model.userInfo.userId}月',
                            style: new TextStyle(fontSize: 15.0)),
                        new Text('(${model.userInfo.userId})',
                            style: new TextStyle(fontSize: 15.0)),
                      ],
                    ),
                    new Center(
                      heightFactor: 6.0,
                      child: new Text("${model.userInfo.userId}",
                          style: new TextStyle(fontSize: 17.0)),
                    )
                  ],
                ))));
  }
}

还有就是点赞

//互动行
  Widget interactiveSection(int id,likeStates) {//likeStates是接口传回来的真或者假
    print("点赞的真假${likeStates}");//直观显示数据，好方便处理
    bool likeState=likeStates;
    return Container(
      margin: EdgeInsets.only(top: 25.0, left: 15.0, bottom: 22.0),
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              //调用点赞接口
              momentLike(id,likeState);
            },
            child: Row(
              children: [
                Container(
                  width: 25.0,
                  child: Image.asset(
                    likeState//根据真假显示图片
                        ? "assets/base_widgets/icon_dynamic_liked.png"
                        : "assets/base_widgets/icon_dynamic_recom_like.png",
                    fit: BoxFit.fitWidth,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 6.0, right: 24.0),
                  child: Text(
                    "996",
                    style: TextStyle(color: Color(0xFFBBBBBB)),
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            onTap: () {
              //跳转到动态详情界面
              // Navigator.push(
              //   context,
              //   MaterialPageRoute(
              //       builder: (context) => DynamicDetails()),
              // );
              //带参数跳转
              Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                return DynamicDetails(
                  //手机号
                  moment_id: id,
                );
              }));
            },
            child: Container(
              child: Row(
                children: [
                  Container(
                    width: 25.0,
                    child: Image.asset(
                      "assets/base_widgets/icon_dynamic_recom_Comment.png",
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 6.0, right: 24.0),
                    child: Text(
                      "65",
                      style: TextStyle(color: Color(0xFFBBBBBB)),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            width: 25.0,
            child: Image.asset(
              "assets/base_widgets/icon_dynamic_gift_box.png",
              fit: BoxFit.fitWidth,
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 6.0, right: 24.0),
            child: Text(
              "1066",
              style: TextStyle(color: Color(0xFFBBBBBB)),
            ),
          )
        ],
      ),
    );
  }

点赞接口如下

//对动态进行点赞
  momentLike(var momentId,likeState) async {
    var apiUrl = "http://47.242.63.216:9527/v1/moment/";

    SharedPreferences prefs = await SharedPreferences.getInstance();
    var tokens = prefs.getString("token");

    //参数
    Map map = {};
    //昵称从输入框里面获取
    map["moment_id"] = momentId;

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: map, options: Options(headers: {"x-token": tokens}));
    debugPrint("点赞列表${result}");

    //json解析
    Map<String, dynamic> blackList = json.decode(result.toString());
    var httpRes = AuthCode.fromJson(blackList);
    //如果成功就吐司
    if (httpRes.code == 200) {
      if(likeState){//对真假进行相应的判断，进行相应的吐司
        setState(() {//上传数据后再拉一遍数据，就是刷新数据
          getMomentLists();
        });
        Fluttertoast.showToast(
            msg: "已取消点赞",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      }else{
        setState(() {
          getMomentLists();
        });
        Fluttertoast.showToast(
            msg: "点赞成功",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 10,
            backgroundColor: Colors.white,
            textColor: Colors.black,
            fontSize: 16.0);
      }
    }
  }
氤氲息
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《Flutter 实战开发旅行社交手机APP》第一章 广场模块 1.5 评论列表
geeksoarsky的博客
08-26 364
游记列表视图层基本视图子项视图数据层API实体类接口服务类状态管理逻辑层评论列表加载更多演示版本提交 视图层 基本视图 游记详情一篇中讲到 SliverToBoxAdapter 是一个加载普通 widget 的 Sliver 组件，如果是滑动的组件推荐使用 Sliver 滑动组件，因为评论是滚动列表，故视图要返回 SliverList() 小部件。 lib/page/Dynamic/dynamic_detail.dart @override Widget build(BuildContext conte
Flutter Provider实现列表页与子页的关注与取消关注
最新发布
m0_37618883的博客
04-30 99
记录一下Flutter的provider一个全过程，包括请求接口，列表页和列表进入详情页的数据，以及两个页面之间的联动（以关注和取消关注为例）
flutter 仿豆瓣点评
07-09
仿照豆瓣电影点评做的flutter案列，供大家学习时参考。
Flutter之信息显示Information displays
Leove的专栏
04-04 254
主要包括：Card、Chip、CircularProgressIndicator、DataTable、GridView、Icon、Image、LinearProgressIndicator、Tooltip。
评论列表组件
weixin_42206243的博客
06-20 1634
index.js // 1. 导入包 import React from 'react' import ReactDOM from 'react-dom' //导入评论组件 import CmtList from '@/components/CmtList' // 3. 调用 render 函数渲染 ReactDOM.render(<div> <CmtList>&...
flutter 列表保存状态 详情变化返回也要变化如评论数和点赞数
zqwily的博客
09-28 409
getx框架 详情和列表同步
flutter 搭建项目架构
01-12
在本文中，我们将深入探讨如何使用Flutter框架搭建一个完整的项目架构，特别关注如何利用GetX库来实现高效的状态管理和界面更新。Flutter作为一个跨平台的移动应用开发框架，因其丰富的组件库和高性能特性而受到...
flutter TextField换行自适应的实现
08-25
首先，我们要明确实现这个效果需要关注的关键点： 1. **自定义间距**：可以通过`margin`和`padding`属性来调整TextField的外边距和内边距。 2. **自定义样式**：使用`decoration`属性可以定制TextField的边框、圆角...
Flutter完整开发实战详解系列.pdf
07-15
打包与填坑篇则会关注将开发完成的应用打包成APK或IPA文件，以及在这个过程中可能遇到的问题及解决方案。这些坑往往是在开发过程中不那么显而易见的问题，如内存泄漏、性能瓶颈等。 Redux、主题和国际化是提高应用...
Flutter自定义TabBar的Indicator.zip
03-02
首先，让我们关注`TabBar`组件。在Flutter中，`TabBar`属于`material`库的一部分，可以通过`TabController`来管理和控制。要创建一个自定义的TabBar Indicator，我们需要实现`Painter`类，这是一个Flutter中用于绘制...
Flutter Tween实现抖动效果
03-29
抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等。
用Flutter框架和Dart语言来创建一个简单的待办事项列表应用
04-09
`TodoList`会监听`TaskProvider`的变化，并根据任务列表的当前状态更新视图。 ```dart class TodoList extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer( builder: ...
Flutter零基础轻松入门：从入门到实战一次学会
09-25
【超实用课程内容】 本课程根据实际开发中总结出来的一些学习思路，从零开始详细讲解Flutter的基础知识点。从简到难，从浅入深，逐步带领大家了解Flutter，熟悉Flutter的组成部分，并且带领大家学习如何使用Flutter实现UI功能编写。通过对本视频的学习，你将会掌握Flutter常用组件和常用布局构建复杂布局、Flutter路由导航实现多页面构建和交互、Flutetr手势处理和动画实现动态交互效果，以及如何使用音视频、图片、文字、字体等资源。除此之外，你还可以收获每一章节遇到的重难点问题的解决方案。 【课程如何观看？】 PC端：https://edu.csdn.net/course/detail/26227 移动端：CSDN 学院APP（注意不是CSDN APP哦）本课程为录播课，课程永久有效观看时长，大家可以抓紧时间学习后一起讨论哦~【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你，你可以根据所学知识，自行修改、优化下载方式：电脑登录https://edu.csdn.net/course/detail/26227，点击右下方课程资料、代码、课件等打包下载
Flutter案例-点赞动画
hhyihquk1的博客
05-21 2091
效果： 按下缩小，松开恢复原状并变色 原理： 使用animation动画和三元运算 所有代码如下： import 'package:flutter/material.dart'; import 'package:async/async.dart'; void main()=>runApp(MyApp()); class MyApp extends StatelessWid...
Flutter小案例-Animation动画点赞
hhyihquk1的博客
04-25 904
直接进入正题： 第一步：搭建项目，在main.dart中引入自己新建的AnimationDemo类，也可以直接在main.dart中新建，但不建议 import 'package:flutter/material.dart'; import 'AnimationDemo.dart'; void main()=>runApp(MyApp()); class MyApp extends ...
flutter仿抖音首页面效果
03-14
本课程将使用 flutter 实现类似抖音首页面效果 通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现 有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能
Flutter 仿掘金推特点赞按钮，给2021的移动开发一些建议
m0_66264588的博客
01-23 1044
color: isLiked ? Colors.deepPurpleAccent : Colors.grey, size: buttonSize, ); }, likeCount: 665, countBuilder: (int count, bool isLiked, String text) { var color = isLiked ? Colors.deepPurpleAccent : Colors.grey; Widget result; if (count == 0) { result = Te
Flutter仿掘金点赞效果
老孟Flutter
05-20 1679
老孟导读：今天分享一下如何实现掘金点赞效果，这不仅仅是一篇技术文章，还是一篇解决问题思路的文章，遇到一个需求时，如何拆分需求，然后一步一步实现，这个过程比单纯的技术（此文）更有含金量。 先来看一下掘金点赞的效果： 说点题外话，感谢一下二哥（沉默王二 ），给了我很多建议和帮助，公众号搜索沉默王二即可关注。 遇到组合动画效果时，首先拆分一下这个动画，以掘金点赞效果为例，共分为3个动画效果： 小手图标改变颜色并且缩放一下。 圆环由粗变细，透明度逐渐变为0。 最外圈小点点透明度逐渐变为0。 拆分好了之后..
Flutter组件：仿抖音双击点赞弹出爱心效果(1)
2401_84123584的博客
04-05 732
key: _key,print(‘添加爱心，当前爱心数量:${icons.length}’);.call();} else {});},timer?.cancel();1200 : 600;if (!.call();});.call();.value;
Flutter应用状态管理深度解析
而Flutter倡导声明式编程，当状态变化时，开发者只需更新状态，框架会自动处理UI的重绘。这种模式下，开发者无需直接修改UI组件，而是通过更新状态来驱动界面的变化。 三、声明式编程思维在状态管理中的应用 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值