[英]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.