huixiang_app/lib/article/hot_article_details_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HotArticleDetailsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HotArticleDetailsPage();
  }
}

class _HotArticleDetailsPage extends State<HotArticleDetailsPage> {
  var controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFFFFFFF),
        elevation: 0,
        centerTitle: false,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
        automaticallyImplyLeading: true,
        actions: [
          Padding(padding: EdgeInsets.only(right: 16),child:Image.asset(
            "assets/image/icon_share.png",
            width: 24,
            height: 24,
          ),)
          ],
        title: Text(
          S.of(context).wenzhangxiangqing,
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
      ),
        body: Container(
          child: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(bottom: 20.h),
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withAlpha(12),
                          offset: Offset(0, 2),
                          blurRadius: 14,
                          spreadRadius: 0)
                    ],
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("牡丹花的养护知识",
                          style: TextStyle(
                              fontSize: 24.sp,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff1A1A1A))),
                      SizedBox(
                        height: 20.h,
                      ),
                      Row(
                        children: [
                          ClipOval(
                            child: Image.network(
                              "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                              fit: BoxFit.cover,
                              width: 44.w,
                              height: 44.h,
                            ),
                            clipBehavior: Clip.hardEdge,
                          ),
                          SizedBox(
                            width: 8.w,
                          ),
                          Expanded(
                            child: Container(
                              height: 60.h,
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text.rich(
                                    TextSpan(children: [
                                      TextSpan(
                                        text: "百花谷",
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 14.sp,
                                            color: Colors.black),
                                      ),
                                    ]),
                                    textDirection: TextDirection.ltr,
                                  ),
                                  Text(
                                    "2021.04.12 12:12",
                                    overflow: TextOverflow.ellipsis,
                                    maxLines: 2,
                                    style: TextStyle(
                                      fontSize: 12.sp,
                                      color: Color(0xff808080),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            flex: 1,
                          )
                        ],
                      ),
                      SizedBox(
                        height: 20.h,
                      ),
                      RichText(
                          text: TextSpan(
                              text: "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。"
                                  "一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”："
                                  "任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。",
                              style: TextStyle(color:Color(0xFF1A1A1A), fontSize: 16.sp),
                             )),
                      SizedBox(
                        height: 16.h,
                      ),
                      Image.network(
                        "https://t7.baidu.com/it/u=2487758541,1861252964&fm=193&f=GIF",
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: 170.h,
                      ),
                      SizedBox(
                        height: 16.h,
                      ),
                      RichText(
                          text: TextSpan(
                            text: "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以",
                            style: TextStyle(color:Color(0xFF1A1A1A), fontSize: 16.sp),
                          )),
                    ],
                  ),
                ),
                Container(
                  // margin: EdgeInsets.only(bottom: 20),
                  // padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withAlpha(12),
                          offset: Offset(0, 2),
                          blurRadius: 14,
                          spreadRadius: 0)
                    ],
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(padding: EdgeInsets.all(16),child:Text("评论 (58)  喜欢 (58)",
                          style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff1A1A1A))),),
                      SizedBox(
                        height: 600.h,
                        child: ListView.builder(
                          itemCount: 6,
                          scrollDirection: Axis.vertical,
                          physics: BouncingScrollPhysics(),
                          itemBuilder: (context, position) {
                            return _commentItem(position);

                          },
                        ),
                      ),

                    ],
                  ),
                ),
                SizedBox(
                  height: 12.h,
                ),
                Container(
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withAlpha(12),
                          offset: Offset(0, 2),
                          blurRadius: 14,
                          spreadRadius: 0)
                    ],
                    borderRadius: new BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: Container(
                          decoration: new BoxDecoration(
                              color: Color(0xffF2F2F2),
                              borderRadius: BorderRadius.circular(2.0)),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.fromLTRB(4, 0, 4, 0),
                                alignment: Alignment.topLeft,
                                child: TextField(
                                  maxLines: 8,
                                  minLines: 1,
                                  decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: "留下您精彩的评论吧~",
                                    hintStyle: TextStyle(
                                      fontSize: 14.sp,
                                      color: Color(0xffCDCCCC),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20.w, right: 20.w),
                        child: Text(
                          "发送",
                          style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold,
                              color: Color(0XFF1A1A1A)),
                        ),
                      ),
                      Image.asset("assets/image/icon_like_h.png")
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
    );
  }

  // var _status = 0;
  // var _bgStatus = false;
  // Widget rightAction() {
  //   if (_status == 0) {
  //     return Container(
  //       margin: EdgeInsets.only(right: 17),
  //       child: GestureDetector(
  //         onTap: () {
  //           setState(() {
  //             _status = (_status + 1) % 2;
  //           });
  //         },
  //         child: Image.asset(
  //           "assets/image/icon_share.png",
  //           width: 24,
  //           height: 24,
  //         ),
  //       ),
  //     );
  //   } else {
  //     return GestureDetector(
  //       onTap: () {
  //         setState(() {
  //           _status = (_status + 1) % 2;
  //         });
  //       },
  //       child: Container(
  //         margin: EdgeInsets.only(right: 17),
  //         padding: EdgeInsets.only(top: 15, bottom: 15),
  //         alignment: Alignment.center,
  //         child: RoundButton(
  //           text: S.of(context).wancheng,
  //           textColor: _bgStatus ? Colors.white : Color(0xFFA0A0A0),
  //           backgroup: _bgStatus ? Color(0xFF32A060) : Color(0xFFD8D8D8),
  //           fontSize: 14,
  //           fontWeight: FontWeight.bold,
  //           padding: EdgeInsets.only(left: 12, right: 12, top: 2, bottom: 2),
  //           radius: 12,
  //         ),
  //       ),
  //     );
  //   }
  // }

  Widget _commentItem(var position) {
    return Container(
      child: Column(
        children: [
          Padding(padding: EdgeInsets.all(16),child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ClipOval(
                child: Image.network(
                  "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                  fit: BoxFit.cover,
                  width: 40.w,
                  height: 40.h,
                ),
                clipBehavior: Clip.hardEdge,
              ),
              SizedBox(
                width: 12.w,
              ),
              Expanded(
                child: Container(
                  height: 60.h,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text.rich(
                        TextSpan(children: [
                          TextSpan(
                            text: "张三",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 14.sp,
                                color: Colors.black),
                          ),
                        ]),
                        textDirection: TextDirection.ltr,
                      ),
                      Text(
                        "2021.04.12 12:12",
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Color(0xff808080),
                        ),
                      ),
                    ],
                  ),
                ),
                flex: 1,
              ),
              Container(
                alignment: Alignment.topRight,
                child: Row(
                  children: [
                    Image.asset(
                      "assets/image/icon_like.png",
                      width: 16.w,
                      height: 16.h,
                    ),
                    Text(
                      "58",
                      style: TextStyle(fontSize: 12.sp, color: Color(0xff1A1A1A)),
                    ),
                  ],
                ),
              ),
            ],
          ),),
          Padding(
            padding: EdgeInsets.only(left: 68,right: 16),
            child: Text(
              "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Mess…",
              style: TextStyle(fontSize: 14.sp, color: Color(0xff1A1A1A)),
            ),
          ),
          SizedBox(
            height: 12.h,
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(left: 68.w,right: 16.w),
            decoration: new BoxDecoration(
              color: Color(0xffF2F2F2),
              borderRadius: BorderRadius.circular(2.0),
            ),
            child: Padding(
              padding: EdgeInsets.only(left: 4.w, top: 4.h, bottom: 4.h),
              child: Text(
                "文本，是指书面语言的表现形式文本，是指、",
                style: TextStyle(fontSize: 12.sp, color: Color(0xff808080)),
              ),
            ),
          ),
          if (position == 5)
          Container(
            height: 63.h,
            decoration: BoxDecoration(
              color: Color(0xffF2F2F2),
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withAlpha(12),
                    offset: Offset(0, 2),
                    blurRadius: 14,
                    spreadRadius: 0)
              ],
            ),
            margin: EdgeInsets.only(top: 30.h),
            alignment: Alignment.center,
            child: Text(
              "-已显示全部评论-",
              style: TextStyle(fontSize: 14.sp, color: Color(0xff353535)),
            ),
          ),
        ],
      ),
    );
  }
}