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),
        );
      },
    );
  }
}
相关推荐
Cecilialana7 分钟前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript
唔667 分钟前
flutter 图片加载类 图片的安全使用
安全·flutter
Hello--_--World14 分钟前
DOM事件流与事件委托、判断数据类型、深浅拷贝、对象遍历方式
前端·javascript
撩得Android一次心动14 分钟前
Android DataBinding 全面解析【源码篇1】
android·android jetpack·databinding
aq553560018 分钟前
Laravel 1.x:现代PHP框架的雏形
android
XiaoLeisj1 小时前
Android 短视频播放详情页实战:从播放器模块拆分、Media3 与 FlowHelper 接入,到 ViewPager 高度适配和详情数据联动
android·okhttp·音视频·架构设计·flowhelper
努力努力再努力wz1 小时前
【MySQL入门系列】:不只是建表:MySQL 表约束与 DDL 执行机制全解析
android·linux·服务器·数据结构·数据库·c++·mysql
threelab1 小时前
Vue3 + Trilab:打造高扩展性三维可视化插件化框架实战指南
javascript·3d·webgl
陆业聪1 小时前
Prompt、Rule、Skill:被混用了一年的三个词,今天说清楚
android·人工智能·aigc
阿正的梦工坊1 小时前
JavaScript 函数作用域详解——为什么函数外面访问不到里面的变量?
开发语言·javascript