高度大于屏幕高度的Flutter可滚动堆栈
我有一个小部件层次结构，其中SingleChildScrollView是父级，Stack是子级，Stack有两个子级，如果第二个子级超出屏幕高度，则其高度为修剪。根据文档，堆栈根据Non-Positioned子级占用大小。因此，这意味着我们必须为Stack明确指定一个高度，但是该高度是任意的，并且不会将内容包装在其中。我的主要目的是包装SingleChildScrollView高度，而不是在底部留空。
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height + 150,
child: SafeArea(
bottom: false,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(height:MediaQuery.of(context).size.height * .35,),
Positioned(top: top: MediaQuery.of(context).size.height * .35 +
MediaQuery.of(context).viewInsets.top,..)
...]))))
[！[image] [1]] [1]
1 个答案:
答案 0 :(得分：3)
解决方案＃1
如果这不是您想要的，请告诉我。
void main() => runApp(MaterialApp(home: HomePage()));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 44, left: 24, right: 24, bottom: 20),
color: Colors.deepPurpleAccent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
color: Colors.white,
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
color: Colors.white,
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(color: Colors.white, width: 100, height: 100),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_myText("Your name", 16),
_myText("24 years old", 14),
SizedBox(height: 6),
_myText("Martial status", 16),
_myText("Unmarried", 14),
SizedBox(height: 6),
Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
SizedBox(height: 12),
],
),
),
],
),
SizedBox(
width: double.maxFinite,
child: OutlineButton(
borderSide: BorderSide(color: Colors.white, width: 2),
onPressed: () {},
child: _myText("CHANGE PLAN", 16),
),
),
Text(
"Higher plans give you more connects",
style: TextStyle(fontSize: 10, color: Colors.white70),
),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
_buildCard1(),
_buildCard(size: 70, color: Colors.deepOrange),
_buildCard(size: 80, color: Colors.purple),
_buildCard(size: 90, color: Colors.pink),
_buildCard(size: 100, color: Colors.grey),
],
),
),
],
),
);
}
Widget _myText(String data, double size) => Text(data, style: TextStyle(fontSize: size, color: Colors.white));
Widget _buildCard1() {
return Card(
elevation: 4,
margin: EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("PROFILE DETAILS"),
),
Placeholder(fallbackHeight: 200),
Divider(),
SizedBox(
width: double.maxFinite,
child: FlatButton(
onPressed: () {},
child: Text("UPDATE MY PROFILE"),
),
),
],
),
);
}
Widget _buildCard({double size, Color color}) {
return Card(
margin: EdgeInsets.all(12),
child: Container(height: size, color: color,),
);
}
}
解决方案2
这是您要找的东西吗？ （这里我只在build()方法上方进行了修改，其余方法保持不变。
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepPurpleAccent,
body: SafeArea(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
color: Colors.deepPurpleAccent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
color: Colors.white,
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
color: Colors.white,
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(color: Colors.white, width: 100, height: 100),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_myText("Your name", 16),
_myText("24 years old", 14),
SizedBox(height: 6),
_myText("Martial status", 16),
_myText("Unmarried", 14),
SizedBox(height: 6),
Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
SizedBox(height: 12),
],
),
),
],
),
SizedBox(
width: double.maxFinite,
child: OutlineButton(
borderSide: BorderSide(color: Colors.white, width: 2),
onPressed: () {},
child: _myText("CHANGE PLAN", 16),
),
),
Text(
"Higher plans give you more connects",
style: TextStyle(fontSize: 10, color: Colors.white70),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.horizontal(left: Radius.circular(30), right: Radius.circular(30))
),
child: Column(
children: <Widget>[
_buildCard1(),
_buildCard(size: 70, color: Colors.deepOrange),
_buildCard(size: 80, color: Colors.purple),
_buildCard(size: 90, color: Colors.pink),
_buildCard(size: 100, color: Colors.grey),
],
),
),
],
),
),
);
}
解决方案3
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: DecoratedBox(
decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Container(
decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
color: Colors.white,
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
color: Colors.white,
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(color: Colors.white, width: 100, height: 100),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_myText("Your name", 16),
_myText("24 years old", 14),
SizedBox(height: 6),
_myText("Martial status", 16),
_myText("Unmarried", 14),
SizedBox(height: 6),
Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
SizedBox(height: 12),
],
),
),
],
),
SizedBox(
width: double.maxFinite,
child: OutlineButton(
borderSide: BorderSide(color: Colors.white, width: 2),
onPressed: () {},
child: _myText("CHANGE PLAN", 16),
),
),
Text(
"Higher plans give you more connects",
style: TextStyle(fontSize: 10, color: Colors.white70),
),
],
),
),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.horizontal(
left: Radius.circular(30),
right: Radius.circular(30),
)),
child: Column(
children: <Widget>[
_buildCard1(),
_buildCard(size: 100, color: Colors.deepOrange),
_buildCard(size: 80, color: Colors.purple),
_buildCard(size: 100, color: Colors.pink),
_buildCard(size: 180, color: Colors.grey),
],
),
),
],
),
),
],
),
),
),
);
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？