Flutter高仿微信-第16篇-朋友圈-发布作品(图片)

 Flutter高仿微信系列共59篇，从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。

详情请查看

效果图：

实现代码：

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2022/10/22 21:51
 * Description : 朋友圈发布
 */

class MomentsPublishWidget extends StatefulWidget {

  final type;
  //多张图片
  final List<String> imageList;
  //小视频地址
  final videoFilePath;

  //小视频缩略图
  String thumbnailFileName = "";

  MomentsPublishWidget({required this.type, required this.imageList , required this.videoFilePath});


  @override
  State<StatefulWidget> createState() => _MomentsPublishState();

}

class _MomentsPublishState extends State<MomentsPublishWidget> {

  @override
  void initState() {
    super.initState();

    initVideo();
  }

  void initVideo() async {
    if(widget.type == CommonUtils.MOMENTS_TYPE_VIDEO){
      widget.thumbnailFileName = await FileUtils.getBaseFile("thum_${DateUtil.getNowDateMs()}.png");
      await VideoThumbnail.thumbnailFile(video: widget.videoFilePath, thumbnailPath: widget.thumbnailFileName);
      LogUtils.d("生成缩略图：${widget.thumbnailFileName}");
      setState(() {

      });
    }
  }

  TextEditingController? _contentController = TextEditingController(text: "");

  //发布作品
  void _publish() async {
    bool isNetwork = await CommonNetwork.isNetwork();
    if(!isNetwork) {
      CommonUtils.showNetworkError(context);
      return;
    }

    LoadingDialogUtils.showLoadingDialog(context, msg: "正在发布,请稍后...");


    String account = SpUtils.getAccount();
    String content = _contentController?.text??"";
    MomentsBean? momentsBean;
    if(widget.type == CommonUtils.MOMENTS_TYPE_PICTURE){
      momentsBean = await MomentsRepository.getInstance().uploadMomentImages(widget.type, account, content, widget.imageList);

    } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: WnAppBar.getAppBar(context, Text("发布作品")),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          getContentWidget(),
          Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 12, right: 12),
                alignment: AlignmentDirectional.topStart,
                child: widget.type == CommonUtils.MOMENTS_TYPE_PICTURE?getImageGridView():getCommonThumbnail(0),
              ),
          ),

          Container(
            margin: EdgeInsets.only(bottom: 20),
            child: ElevatedButton(
                onPressed: (){
                  _publish();
                },
                child: Container(
                  padding: EdgeInsets.only(left: 12, top: 6, right: 12, bottom: 6),
                  child: Text("发布", style: TextStyle(fontSize: 20),),
                )
            ),
          ),

        ],
      )
    );
  }


  //显示图片九宫格
  Widget getImageGridView(){
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: 1,),
      itemCount: widget.imageList.length,
      itemBuilder: (context, index){
        return InkWell(
          onTap: (){

          },
          child: Container(
            alignment: Alignment.center,
            margin: EdgeInsets.only(left: 3, top: 6, right: 3),
            child: CommonUtils.showBaseImage(widget.imageList[index], width:AppManager.getInstance().getWidth(context)/3, height:AppManager.getInstance().getWidth(context)/3, onPressed: (data){
              Navigator.push(context,MaterialPageRoute(builder: (context)=>CommonImagePreview(fileName: data,)));
            }),
          ),
        );
      },
    );
  }



  //输入框
  Widget getContentWidget(){
    return Container(
      margin: EdgeInsets.all(12),
      child: TextField(
        maxLines: 5,
        controller: _contentController,
        cursorColor: Colors.black,

        decoration: InputDecoration(
          //border: InputBorder.none,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),

          ),
          //labelText: defaultValue,
          hintText: "这一刻的想法...",
          hintStyle: TextStyle(
            fontSize: 16,
            color: Colors.grey.withOpacity(0.8),
          ),
        ),
      ),
    );
  }

}