在flutter中创建类似Zara的产品页面
我想让产品页面像Zara的应用程序一样。我在应用程序中实现他们的应用程序功能时遇到问题。它们有一个可以查看图像的区域,可以使用在flutter中创建类似Zara的产品页面,flutter,dart,Flutter,Dart,我想让产品页面像Zara的应用程序一样。我在应用程序中实现他们的应用程序功能时遇到问题。它们有一个可以查看图像的区域,可以使用PageViewwidget来实现,但是如何实现刷起时出现的底部页面功能呢?我尝试使用DraggableScrollableSheet,但是我不能对图像使用PageView,因为DraggableScrollableSheet占据了整个屏幕。我目前的实施情况如下: class _IndividualProductState extends State<Individ
PageView
widget来实现,但是如何实现刷起时出现的底部页面功能呢?我尝试使用DraggableScrollableSheet
,但是我不能对图像使用PageView
,因为DraggableScrollableSheet
占据了整个屏幕。我目前的实施情况如下:
class _IndividualProductState extends State<IndividualProduct> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: Stack(
children: <Widget>[
// ---------------Image container -----------------------------------------
Container(
padding: EdgeInsets.all(20),
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.78,
width: MediaQuery.of(context).size.width,
child: PageView(
scrollDirection: Axis.vertical,
controller: PageController(initialPage: 1),
children: <Widget>[
Image.network(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
fit: BoxFit.contain,
),
Image.network(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
fit: BoxFit.contain,
),
],
),
),
// -------------------------- For Product Description ---------------------------------------
Scaffold(
backgroundColor: Colors.transparent,
body: DraggableScrollableSheet(
minChildSize: 0.17,
initialChildSize: 0.17,
maxChildSize: 0.93,
builder:
(BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.grey[100],
child: ListView(
padding: EdgeInsets.all(0),
controller: scrollController,
children: <Widget>[
Center(
heightFactor: 0.3,
child: ListTile(
title: Icon(MaterialCommunityIcons.minus, size: 32),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: CustomText(
"COMFORT KNIT TEXTURED TROUSER",
weight: FontWeight.w500,
size: 15,
),
),
],
),
);
},
),
),
// Close icon to close the product page
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
child: Icon(
Icons.close,
size: 32,
),
onTap: () {
Navigator.pop(context);
},
),
),
],
// ),
),
// ),
),
);
// );
}
}
class\u IndividualProductState扩展状态{
@凌驾
小部件构建(构建上下文){
返回安全区(
子:容器(
子:堆栈(
儿童:[
//------图像容器-----------------------------------------
容器(
填充:边缘设置。全部(20),
颜色:颜色,白色,
高度:MediaQuery.of(上下文).size.height*0.78,
宽度:MediaQuery.of(context).size.width,
子:页面视图(
滚动方向:轴垂直,
控制器:页控制器(初始页:1),
儿童:[
图像网络(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
适合:BoxFit.contain,
),
图像网络(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
适合:BoxFit.contain,
),
],
),
),
//------------------------------用于产品说明---------------------------------------
脚手架(
背景颜色:颜色。透明,
正文:DragableScrollableSheet(
minChildSize:0.17,
初始儿童尺寸:0.17,
maxChildSize:0.93,
建设者:
(BuildContext上下文,ScrollController ScrollController){
返回容器(
颜色:颜色。灰色[100],
子:ListView(
填充:边缘集。全部(0),
控制器:滚动控制器,
儿童:[
居中(
高度系数:0.3,
孩子:ListTile(
标题:图标(MaterialCommunityIcons.减号,尺寸:32),
),
),
填充物(
padding:const EdgeInsets.fromLTRB(8,8,8,0),
子项:自定义文本(
“舒适针织质感裤”,
重量:FontWeight.w500,
尺码:15,
),
),
],
),
);
},
),
),
//关闭图标以关闭产品页面
填充物(
填充:常数边集全部(8.0),
儿童:手势检测器(
子:图标(
图标。关闭,
尺码:32,
),
onTap:(){
Navigator.pop(上下文);
},
),
),
],
// ),
),
// ),
),
);
// );
}
}
我希望图像是可滚动的,也可以通过向上滑动显示说明表 似乎您正在材料设计系统中寻找一种称为“背景”的组件。据 应用程序中所有其他表面后面都会出现背景,显示上下文和可操作的内容 我认为开箱即用的颤振库中仍然缺少背景部件,因为材料设计系统仍在测试阶段考虑背景组件设计 但是,有,这将帮助您构建适合您需要的自己版本的背景组件
如果这不是你需要的,请用一个剪辑或图片来评论你想要的行为。您现在拥有的可运行的
main
dart代码片段对我理解您试图实现的目标非常有帮助。您能否发布一个main.dart中定义的示例代码来重现您的问题?这对任何一个能轻松帮助你的人来说都是太好了。还要添加预期和实际输出。如果可能,添加屏幕截图。