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),
        );
      },
    );
  }
}
相关推荐
前端君10 小时前
实现最大异步并发执行队列
javascript
低调小一10 小时前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
雨白10 小时前
Java 多线程指南:从基础用法到线程安全
android·java
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张11 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
蚂蚁RichLab前端团队12 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
程序员江同学12 小时前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos
萌萌哒草头将军12 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
2501_9151063213 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode