[英]Flutter - Bottom Overflowed by number of pixels
I am using Expanded
widget with its child Container
and I provided width with double.infinity
.我正在使用Expanded
小部件及其子Container
并提供了 width 和double.infinity
。 I am trying to add ListView
as a child of Container
and I wanted the height of ListView
from the top of screen to the bottom of the screen.我正在尝试将ListView
添加为Container
的子项,并且我想要ListView
从屏幕顶部到屏幕底部的高度。 While my top of screen already had a widget called BuildHeaderPage
.虽然我的屏幕顶部已经有一个名为BuildHeaderPage
的小部件。 So, I wanted the height of the Container
widget to start from the bottom of BuildHeaderPage
widget to the bottom of the screen.所以,我希望Container
小部件的高度从BuildHeaderPage
小部件的底部开始到屏幕底部。
Below is my code:下面是我的代码:
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"),
),
],
),
),
),
)
],
),
);
And here is BuildHeaderPage
widget:这是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),
],
),
),
),
],
),
],
),
);
As you can see my code.如您所见,我的代码。 So, I want the height Expanded
widget with its child Container
widget should start from BuildHeaderPage
to the bottom of the screen.所以,我希望高度Expanded
小部件及其子Container
小部件应该从BuildHeaderPage
开始到屏幕底部。
Made below changes in your code在您的代码中进行了以下更改
First wrap your
Padding
widget insideExpanded
widget首先将您的Padding
小部件包装在Expanded
小部件中Remove
Expanded
widget from thePadding
widget becauseExpanded
widget requiredcolumn
orrow
as a parent widget从Padding
小部件中删除Expanded
小部件,因为Expanded
小部件需要column
或row
作为父小部件
SAMPLE CODE示例代码
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 OUTPUT
Unfortunately I can't test it on right now because I am typing on phone, but this should work, you need to make Expanded
direct child of Column
, and you can give padding inside ListView
.不幸的是,我现在无法对其进行测试,因为我正在手机上打字,但这应该可以,您需要将Expanded
设为Column
的直接子级,并且您可以在ListView
内进行填充。
Replace:代替:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
Padding( // wrong
padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Expanded(...),
),
],
)
with和
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
Expanded(child: ListView(...)) // right
],
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.