ElectronicAssistant/lib/module/chat/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/chat/controller.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../resource/assets.gen.dart';

class ChatPage extends BasePage<ChatController> {
  const ChatPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    var controller = this.controller;
    return Stack(
      children: [
        buildBackgroundGradient(),
        buildTopGradient(),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            scrolledUnderElevation: 0,
            backgroundColor: Colors.transparent,
            systemOverlayStyle: SystemUiOverlayStyle.dark,
            centerTitle: true,
            title: IntrinsicWidth(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                      image: Assets.images.iconChatXiaoTin.provider(),
                      width: 28.w,
                      height: 28.w),
                  Container(
                      margin: EdgeInsets.only(left: 6.w),
                      child: Text('聊天',
                          style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.bold,
                              color: ColorName.primaryTextColor))),
                ],
              ),
            ),
          ),
          body: buildBodyContent(),
        )
      ],
    );
  }

  Widget buildBodyContent() {
    return Column(
      children: [
        Expanded(
            child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          child: AnimatedList(
            itemBuilder: _chatItemBuilder,
            initialItemCount: 20,
          ),
        )),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.h),
          width: 1.sw,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(24.w),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x4CDDDEE8),
                  blurRadius: 10,
                  offset: Offset(0, 4),
                  spreadRadius: 0,
                )
              ]),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
            child: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                        child: Container(
                      margin: EdgeInsets.only(right: 6.w),
                      child: CupertinoTextField(
                        padding: EdgeInsets.symmetric(vertical: 3.w),
                        style: TextStyle(
                            fontSize: 14.w, color: ColorName.primaryTextColor),
                        placeholder: '有问题尽管问我~',
                        placeholderStyle: TextStyle(
                            fontSize: 14.w, color: const Color(0xFFAFAFAF)),
                        textCapitalization: TextCapitalization.sentences,
                        textInputAction: TextInputAction.newline,
                        cursorColor: ColorName.colorPrimary,
                        decoration: const BoxDecoration(),
                        expands: true,
                        maxLines: null,
                        minLines: null,
                      ),
                    )),
                    Image(
                        image: Assets.images.iconChatAddFile.provider(),
                        width: 26.w,
                        height: 26.w),
                    Container(
                      margin: EdgeInsets.only(left: 16.w),
                      child: Image(
                          image: Assets.images.iconChatSend.provider(),
                          width: 26.w,
                          height: 26.w),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _chatItemBuilder(
      BuildContext context, int index, Animation<double> animation) {
    return Text('聊天内容 $index');
  }

  Widget buildTopGradient() {
    return Container(
        width: 1.sw,
        height: 128.h,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: ['#E8EBFF'.toColor(), '#00E8EBFF'.toColor()],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: const [0.5, 1.0],
          ),
        ));
  }

  Widget buildBackgroundGradient() {
    return Container(
      width: 1.sw,
      height: 1.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: ['#F2F8F4'.toColor(), '#F6F6F6'.toColor()],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: const [0, 1.0],
        ),
      ),
    );
  }
}