flutter 初学之路(1)--列表详情组件

学Flutter前先学习dart语言，如何能快速的上手学习呢？那当然是从github上扒案例了，在案例慢慢摸索，上手就会非常快了。
学习之路漫漫啊…

Dart在线编程

列表组件

九宫格图片这里我使用的是gridView进行填充（懒人一个，不想多判断填充间距）

import 'package:flutter/material.dart';

class CommentData {
  final String? userAvatar;
  final String? userId;
  final String? userNickname;
  final String? userDesc;
  final String? postText;
  final List<PostImage>? postImage;
  final int? likesCount;
  final int? commentsCount;
  final int? repostCount;

  CommentData({
    this.userAvatar,
    this.userId,
    this.userNickname,
    this.userDesc,
    this.postText,
    this.postImage,
    this.likesCount,
    this.commentsCount,
    this.repostCount,
  });
}

class PostImage {
  final String? url;

  PostImage({
    this.url,
  });
}

// 评论详情
class CommentPage extends StatefulWidget {
  const CommentPage({super.key});
  @override
  CommentPageState createState() => CommentPageState();
}

class CommentPageState extends State<CommentPage> {
  List<CommentData> commentData = [
    CommentData(
        userAvatar: "https://avatar.example.com/user1.jpg",
        userId: "654321",
        userNickname: "小明",
        userDesc: "愿我所爱之人",
        postText: "今天天气真好，一起去爬山吧！",
        postImage: [
          PostImage(
              url:
                  "https://img2.baidu.com/it/u=167470213,3564746585&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"),
          PostImage(
              url:
                  "https://img2.baidu.com/it/u=167470213,3564746585&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"),
          PostImage(
              url:
                  "https://img2.baidu.com/it/u=167470213,3564746585&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"),
        ],
        likesCount: 123,
        commentsCount: 25,
        repostCount: 10)
  ];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _mapList() {
      List<Widget> childs = [];
      for (int i = 0; i < commentData.length; i++) {
        childs.add(_wholeItemWidget(context, commentData[i]));
        childs.add(const SizedBox(height: 10));
      }
      return childs;
    }

    return Scaffold(
        backgroundColor: const Color(0Xfff8f8f8),
        body: SingleChildScrollView(
          child: Column(children: _mapList()),
        ));
  }
}

Widget _wholeItemWidget(BuildContext context, CommentData commentItem) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(0)),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        _authorRow(context, commentItem),
        const SizedBox(height: 5), //分割控件填充
        const Divider(
          height: 1.0,
          color: Colors.black12,
        ),
        const SizedBox(height: 5), //分割控件填充
        Text(
          commentItem.postText.toString(),
          style: const TextStyle(color: Colors.black54),
        ),
        const SizedBox(height: 5), //分割控件填充
        _NineGrid(context, commentItem.postImage ?? []),
        const SizedBox(height: 5), //分割控件填充
        const Divider(
          height: 1.0,
          color: Colors.black12,
        ),
        const SizedBox(height: 5), //分割控件填充
        _RePraCom(context, commentItem)
      ],
    ),
  );
}

//昵称头像
Widget _authorRow(BuildContext context, CommentData commentItem) {
  return Row(
    children: [
      ClipOval(
        child: Image.network(
            'https://img1.baidu.com/it/u=1240466764,3606188766&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685638800&t=e245b5511a51a71cd3193d2b5c1aa8cc',
            width: 32,
            height: 32),
      ),
      const Padding(
        padding: EdgeInsets.only(right: 10),
      ),
      Column(
        children: [
          Text(
            commentItem.userNickname.toString(),
            textAlign: TextAlign.left,
            style: const TextStyle(fontSize: 14, color: Colors.black87),
          ),
          Text(commentItem.userDesc.toString(),
              style: const TextStyle(fontSize: 12, color: Colors.black45)),
        ],
      )
    ],
  );
}

//九宫格图片
Widget _NineGrid(BuildContext context, List<PostImage> picUrlList) {
  List<PostImage> picList = picUrlList;
  // 是否包含图片
  if (picUrlList.isNotEmpty) {
    int len = picList.length; // 一共有几张图片
    int rowlen = 0; // 一共有几行
    int conlen = 3; // 一共有几列
    if (len <= 3) {
      rowlen = 1;
    } else if (len <= 6) {
      rowlen = 2;
      if (len == 4) {
        // conlen = 2;
        picList.insert(2, PostImage());
      }
    } else {
      rowlen = 3;
    }
    // 屏幕宽度
    num screenWidth = MediaQuery.of(context).size.width;
    double cellWidth = (screenWidth - 40) / 3;

    List<Widget> _getList() {
      List<Widget> childs = [];
      for (int i = 0; i < picList.length; i++) {
        if (picList[i].url == null) {
          childs.add(Container(
            height: 10,
          ));
        } else {
          childs.add(Image.network(
            picList[i].url.toString(),
            fit: BoxFit.cover,
            width: cellWidth,
            height: cellWidth,
          ));
        }
      }
      return childs;
    }

    return LayoutBuilder(builder: (context, constraints) {
      int crossAxisCount = conlen;
      final gridViewHeight = (constraints.maxWidth / crossAxisCount) * rowlen;
      return SizedBox(
        height: gridViewHeight,
        child: GridView.count(
          crossAxisCount: conlen,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          children: _getList(),
        ),
      );
    });
  } else {
    return Container(
      height: 0,
    );
  }
}

//转发/收藏/点赞
Widget _RePraCom(BuildContext context, CommentData commentItem) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(children: [
        const Icon(Icons.logo_dev),
        Text(commentItem.likesCount.toString())
      ]),
      Row(children: [
        const Icon(Icons.logo_dev),
        Text(commentItem.commentsCount.toString())
      ]),
      Row(children: [
        const Icon(Icons.logo_dev),
        Text(commentItem.repostCount.toString())
      ]),
    ],
  );
}