[移动开发]flutter的列表的关注变化

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

  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);
      }
    }
  }

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖