在Flutter中仅滚动Stack（）中的一个小部件
我是Flutter的新手，我正在尝试构建我的第一个应用程序。 我希望我的首页顶部有一个小图像，其余部分位于其内容。滚动时，我希望图像表现得像视差效果，保持固定，并在其上方滚动灰色ClipPath（）小部件。
我已经尝试了几种方法，并且不确定是否在此页面上使用了正确的元素，但这是迄今为止我设法按自己想要的方式放置所有内容的唯一方法。
但是，即使使用SingleChildScrollView（）作为Container / ClipPath（）之父，我仍然无法滚动页面。
您能帮我吗？谢谢大家。
// hope.page.dart:
import 'package:flutter/material.dart';
import 'package:remind_md/ui/shared/clippers/content.clipper.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.notifications, color: Colors.white),
onPressed: () {
},
),
// action button
IconButton(
icon: Icon(Icons.settings, color: Colors.white),
onPressed: () {
},
),
],
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff82d9e8), Color(0xff27acc1)],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: OverflowBox(
alignment: Alignment(-0.75,-1.05),
maxHeight: MediaQuery.of(context).size.height * 2,
child: Image.asset(
'images/home_doctors.png',
scale: 1.05,
),
)
),
Positioned(
top: MediaQuery.of(context).size.height*0.2 ,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: ClipPath(
clipper: ContentClipper(),
child: Container(
padding: EdgeInsets.only(top: 40),
width: MediaQuery.of(context).size.width,
color: Color(0xfff4f4f4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/card_calendar.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'12 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até próxima',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'consulta.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
),
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/pill_case.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'31 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até comprar',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'medicamento.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
)
],
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_pills.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xfff47e71),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_stet_heart.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xff3865b9),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('Histórico', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 24, color: Color(0xff27acc1), ) ),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('30 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider()
],
),
),
)
],
)
)
),
),
),
),
]
),
);
}
}
1 个答案:
答案 0 :(得分：0)
用data小部件包装SingleChildScrollView小部件。
应该做的工作。因为singleChildScrollView可以正常工作，所以它没有高度和宽度可以滚动。
希望对您有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？