farmer_client/lib/pages/machinery/detail/widgets/detail.dart

import 'package:farmer_client/pages/machinery/widgets/DefLayout.dart';
import 'package:farmer_client/pages/machinery/widgets/RoundButton.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:farmer_client/widgets/ExtendContentList.dart';
import 'package:farmer_client/models/entities/ExtendContent.dart';
import '../../widgets/summary.dart';

Widget page({ required BuildContext context, VoidCallback? handleClick}) {
  final _offset = 20.w;
  final width = MediaQuery.of(context).size.width;
  final _bannerHeight = 250.w;
  final img = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg';

  final list = <ExtendContent>[
    ExtendContent.simple(content: img, contentType: "image" ),
    ExtendContent.simple(content: "有时，你可能想要创建一个水平滑动（而不是竖直滑动）的列表。 ListView widget 本身就支持水平列表的创建。我们将会使用标准的 ListView 构造方法，通过指定 scrollDirection 的值为水平方向，来覆盖默认的竖直方向。", contentType: "text" ),
    ExtendContent.simple(content: img, contentType: "image" ),
    ExtendContent.simple(content: "有时，你可能想要创建一个水平滑动（而不是竖直滑动）的列表。 ListView widget 本身就支持水平列表的创建。我们将会使用标准的 ListView 构造方法，通过指定 scrollDirection 的值为水平方向，来覆盖默认的竖直方向。", contentType: "text" ),
    ExtendContent.simple(content: img, contentType: "image" ),
    ExtendContent.simple(content: "有时，你可能想要创建一个水平滑动（而不是竖直滑动）的列表。 ListView widget 本身就支持水平列表的创建。我们将会使用标准的 ListView 构造方法，通过指定 scrollDirection 的值为水平方向，来覆盖默认的竖直方向。", contentType: "text" ),
    ExtendContent.simple(content: img, contentType: "image" ),
  ];

  return DefLayout(
      head: Image.network(img, fit: BoxFit.cover),
      children: [
        DefLayout.card(
            top: DefLayout.headHeight - DefLayout.offset,
            child: _content(context, list, handleClick),
        )
      ]
  );
}

Widget _content(BuildContext context, List<ExtendContent> list, VoidCallback? handleClick) {
  final _border = 20.w;
  return Container(
    padding: EdgeInsets.only(top: 40.w, left: 15.w, right: 15.w, bottom: 20.w),
    decoration: BoxDecoration(
      color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(_border))
    ),
    child: Column(
      children: [
        summary(),
        _sectionHead('农机详情'),
        ExtendContentList(list: list),
        SizedBox(height: 20.w,),
        RoundButton(text: "预约", onPressed: handleClick,)
      ],
    ),
  );
}

Widget _sectionHead(String title) {
  Widget img = SizedBox(
    width: 16.w,
    height: 16.w,
    child: Image.asset('images/decorate.png'),
  );

  return Container(
    padding: EdgeInsets.fromLTRB(0, 20.w, 0, 20.w),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        img,
        SizedBox(width: 20.w),
        Text(title, style: TextStyle(fontSize: 16.sp, color: const Color(0xFF222222), fontWeight: FontWeight.w500),),
        SizedBox(width: 20.w),
        img,
      ],
    ),
  );
}