Flutter：常见的页面布局：上边内容可滚动，底部固定一个按钮
常见的布局，内容地区可滚动，底部固定按钮https://i-blog.csdnimg.cn/direct/d67d1f47af5b4e55adbc03a288c03f14.png
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),
);
},
);
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]