我正在使用 Expanded
小部件及其子 Container
并且我使用 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
开始到屏幕底部。
最佳答案
对您的代码进行了以下更改
First wrap your
Padding
widget insideExpanded
widgetRemove
Expanded
widget from thePadding
widget becauseExpanded
widget requiredcolumn
orrow
as a parent widget
示例代码
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"),
),
],
),
),
),
)
],
),
);
}
}
输出
关于android - flutter - 底部溢出像素数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61869299/