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),
        );
      },
    );
  }
}
相关推荐
麻瓜生活睁不开眼2 小时前
Android16修改全局桌面视图边框四直角显示为弧边圆角
android·java·深度学习
AFinalStone5 小时前
Android 7系统休眠唤醒(六)唤醒全链路
android·电源管理·休眠唤醒
用户938515635075 小时前
从零构建《天龙八部》知识库:EPUB 加载→文本分割→向量嵌入→Milvus 存储→RAG 问答,一条链路打通
javascript·人工智能·全栈
雨白6 小时前
深入理解 Kotlin 协程 (九):互通有无,解构 Channel 缓冲策略与底层无锁机制
android·kotlin
柚yuzumi7 小时前
变量明明定义了,为什么访问不到?深入理解 JavaScript 作用域
javascript
何时梦醒7 小时前
React + TypeScript + Vite 实战:从零构建 Color Picker 应用
前端·javascript·架构
Highcharts.js7 小时前
基于Highcharts开发的OHLC 股票K线图完全指南
javascript·信息可视化·echarts·数据可视化·highcharts·ohlc
默_笙7 小时前
😋 我让 DeepSeek-R1 在浏览器本地跑了起来,后端同事说"你认真的?"
前端·javascript
灯塔@kuaidao7 小时前
平台交叉编译名词解释与基础流程
android
__Witheart__8 小时前
3568 Android otg模式下adb热拔插不识别
android·adb·rockchip