当前位置: 首页 > article >正文

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

常见的布局,内容区域可滚动,底部固定按钮
在这里插入图片描述

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),
        );
      },
    );
  }
}


http://www.kler.cn/a/421202.html

相关文章:

  • 网工日记:VRRP-虚拟路由冗余协议
  • pyqt6简单应用
  • 健康养生生活
  • MagicAnimate 技术浅析(一)
  • 常用端口号总结
  • Python 网络爬虫的高级应用:反爬绕过与爬取多样化数据
  • python分析wireshark文件
  • QT:核心机制
  • 量化交易系统开发-实时行情自动化交易-8.3.开拓者TBQuant平台
  • 精通 Python 网络安全(二)
  • mysql数据库之三范式
  • week 10 - Database: Normalisation
  • win11 多任务 贴靠 bug:左右两窗口贴靠时拖动中间的对齐条后,资源管理器有概率卡死
  • 使用API管理Dynadot域名,设置默认域名服务器ip信息
  • Spring Boot Actuator未授权访问漏洞处理
  • 详解Vue设计模式
  • 基于SpringBoot和PostGIS的云南与缅甸的千里边境线实战
  • hadoop环境配置-创建hadoop用户+更新apt+安装SSH+配置Java环境
  • SpringSecurity6从入门到实战之SecurityContextHolder详解
  • 做SOL交易机器人拆解步骤,其实没有那么复杂。