[英]Flutter - Bottom Overflowed by number of pixels
我正在使用Expanded
小部件及其子Container
并提供了 width 和double.infinity
。 我正在尝试将ListView
添加为Container
的子项,并且我想要ListView
从屏幕顶部到屏幕底部的高度。 虽然我的屏幕顶部已经有一个名为BuildHeaderPage
的小部件。 所以,我希望Container
小部件的高度从BuildHeaderPage
小部件的底部开始到屏幕底部。
下面是我的代码:
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text("Dry Cough"),
backgroundColor: bgroundHeaderColor,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
)
],
),
resizeToAvoidBottomInset: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
Padding(
padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: kPrimaryColor.withOpacity(0.3),
),
child: ListView(
children: <Widget>[
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
],
),
),
),
)
],
),
);
这是BuildHeaderPage
小部件:
return Container(
decoration: BoxDecoration(
color: bgroundHeaderColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
),
),
padding: new EdgeInsets.all(8),
width: double.infinity,
height: MediaQuery.of(context).size.height / 4,
child: Stack(
children: <Widget>[
// buildAppBar(context),
Padding(
padding: const EdgeInsets.only(left: 16),
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Are you feeling sick?\n",
style: TextStyle(
height: 1.5,
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22),
),
TextSpan(text: "Please contact your local hospitalize.")
],
),
),
Image.asset(
"assets/images/cough.png",
height: 80,
width: 80,
fit: BoxFit.cover,
),
],
),
),
),
Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
bottom: 0,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: EdgeInsets.symmetric(
vertical: 12,
horizontal: MediaQuery.of(context).size.width / 4),
textTheme: ButtonTextTheme.primary,
color: Colors.redAccent,
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Call Now",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 8,
),
Icon(Icons.call),
],
),
),
),
],
),
],
),
);
如您所见,我的代码。 所以,我希望高度Expanded
小部件及其子Container
小部件应该从BuildHeaderPage
开始到屏幕底部。
在您的代码中进行了以下更改
首先将您的
Padding
小部件包装在Expanded
小部件中从
Padding
小部件中删除Expanded
小部件,因为Expanded
小部件需要column
或row
作为父小部件
示例代码
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text("Dry Cough"),
backgroundColor: Colors.red,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
)
],
),
resizeToAvoidBottomInset: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
),
),
padding: new EdgeInsets.all(8),
width: double.infinity,
height: MediaQuery.of(context).size.height / 4,
child: Stack(
children: <Widget>[
// buildAppBar(context),
Padding(
padding: const EdgeInsets.only(left: 16),
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Are you feeling sick?\n",
style: TextStyle(
height: 1.5,
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22),
),
TextSpan(text: "Please contact your local hospitalize.")
],
),
),
Image.asset(
"assets/images/cough.png",
height: 80,
width: 80,
fit: BoxFit.cover,
),
],
),
),
),
Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
bottom: 0,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: EdgeInsets.symmetric(
vertical: 12,
horizontal: MediaQuery.of(context).size.width / 4),
textTheme: ButtonTextTheme.primary,
color: Colors.redAccent,
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Call Now",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 8,
),
Icon(Icons.call),
],
),
),
),
],
),
],
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blueGrey.withOpacity(0.3),
),
child: ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
ListTile(
onTap: () {},
title: Text("Data"),
),
],
),
),
),
)
],
),
);
}
}
OUTPUT
不幸的是,我现在无法对其进行测试,因为我正在手机上打字,但这应该可以,您需要将Expanded
设为Column
的直接子级,并且您可以在ListView
内进行填充。
代替:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
Padding( // wrong
padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Expanded(...),
),
],
)
和
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
Expanded(child: ListView(...)) // right
],
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.