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

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

1. import 'package:flutter/material.dart';
2. import 'package:flutter_aidishi/extension/index.dart';
3. import 'package:flutter_screenutil/flutter_screenutil.dart';
4. import 'package:get/get.dart';
5. import 'package:tdesign_flutter/tdesign_flutter.dart';
6. import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
7. import 'index.dart';
9. class GoodsDetailPage extends GetView<GoodsDetailController> {
10.   const GoodsDetailPage({super.key});
12.   //  轮播图
13.   Widget _buildBanner() {
14.     return Container(
15.       width: 375.w,
16.       height: 500.w,
17.       color: Colors.blue,
18.       child: Text("轮播图"),
19.     );
20.   }
22.   // 商品信息
23.   Widget _buildGoodsName() {
24.     return Container(
25.       width: 375.w,
26.       height: 500.w,
27.       color: Colors.blue,
28.       child: Text("商品信息"),
29.     );
30.   }
32.   // 商品详情
33.   Widget _buildGoodsDetail() {
34.     return Container(
35.       width: 375.w,
36.       height: 500.w,
37.       color: Colors.blue,
38.       child: Text("商品详情"),
39.     );
40.   }
42.   // 底部悬浮按钮
43.   Widget _buildGoodsFoot() {
44.     return Container(
45.       width: 375.w,
46.       height: 50.w,
47.       color: Colors.white,
48.       child: Text("底部悬浮按钮"),
49.     );
50.   }
54.   // 顶部的可滚动内容：SingleChildScrollView
55.   Widget _buildTop(){
56.     return SingleChildScrollView(
57.       child: <Widget>[
58.         _buildBanner(),
59.         SizedBox(height: 15.w,),
60.         _buildGoodsName(),
61.         _buildGoodsDetail(),
62.       ].toColumn(),
63.     );
64.   }
66.   // 主视图
67.   Widget _buildView() {
68.     return <Widget>[
69.       _buildTop().expanded(),
70.       _buildGoodsFoot()
71.     ].toColumn();
72.   }
74.   @override
75.   Widget build(BuildContext context) {
76.     return GetBuilder<GoodsDetailController>(
77.       init: GoodsDetailController(),
78.       id: "goods_detail",
79.       builder: (_) {
80.         return Scaffold(
81.           appBar: AppBar(title: const Text("goods_detail")),
82.           body: _buildView(),
83.           backgroundColor: Color(0xffF6F6F6),
84.         );
85.       },
86.     );
87.   }
88. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。