Flutter:常见的页面布局:上边内容可滚动,底部固定一个按钮

常见的布局,内容区域可滚动,底部固定按钮

js 复制代码
import 'package:flutter/material.dart';
import 'package:flutter_aidishi/extension/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'index.dart';

class GoodsDetailPage extends GetView<GoodsDetailController> {
  const GoodsDetailPage({super.key});

  //  轮播图
  Widget _buildBanner() {
    return Container(
      width: 375.w,
      height: 500.w,
      color: Colors.blue,
      child: Text("轮播图"),
    );
  }

  // 商品信息
  Widget _buildGoodsName() {
    return Container(
      width: 375.w,
      height: 500.w,
      color: Colors.blue,
      child: Text("商品信息"),
    );
  }

  // 商品详情
  Widget _buildGoodsDetail() {
    return Container(
      width: 375.w,
      height: 500.w,
      color: Colors.blue,
      child: Text("商品详情"),
    );
  }

  // 底部悬浮按钮
  Widget _buildGoodsFoot() {
    return Container(
      width: 375.w,
      height: 50.w,
      color: Colors.white,
      child: Text("底部悬浮按钮"),
    );
  }



  // 顶部的可滚动内容:SingleChildScrollView
  Widget _buildTop(){
    return SingleChildScrollView(
      child: <Widget>[
        _buildBanner(),
        SizedBox(height: 15.w,),
        _buildGoodsName(),
        _buildGoodsDetail(),
      ].toColumn(),
    );
  }

  // 主视图
  Widget _buildView() {
    return <Widget>[
      _buildTop().expanded(),
      _buildGoodsFoot()
    ].toColumn();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<GoodsDetailController>(
      init: GoodsDetailController(),
      id: "goods_detail",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: const Text("goods_detail")),
          body: _buildView(),
          backgroundColor: Color(0xffF6F6F6),
        );
      },
    );
  }
}
相关推荐
ZZZMMM.zip2 小时前
基于鸿蒙HarmonyOS NEXT开发AI股票分析应用:智能投资新体验与鸿蒙Flutter框架跨端实践
人工智能·flutter·华为·harmonyos·鸿蒙
多加点辣也没关系3 小时前
JavaScript|第4章:类型转换
开发语言·javascript
yqcoder3 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
烬羽4 小时前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
mONESY4 小时前
LangChain JS 高性能并行执行解析、工具调用底层封装
javascript
迅速的自行车5 小时前
从一段模板说起
前端·javascript·vue.js
YIAN5 小时前
LangChain JS 工具调用实战:基于 DeepSeek-V4-Flash 实现本地文件读取 AI 代码助手(完整可运行源码)
javascript·langchain·前端框架
尼斯湖皮皮怪5 小时前
iceCoder 记忆系统深度分析
前端·javascript
爸爸6196 小时前
07 ArkTS 基础类型与接口定义:从 TypeScript 到鸿蒙的类型升级
javascript·华为·typescript·harmonyos·鸿蒙系统
plainGeekDev6 小时前
依赖管理 → Version Catalog
android·java·kotlin