Flutter - 如果內容溢出，如何使頁面可滾動，但如果沒有則擴展？
[英]Flutter - how to make Page scrollable if content Overflows, but Expanded if it doesnt?
問題描述
我正在嘗試實現特定的布局，但我無法理解為什么它不起作用。
我有一個必須展開中心主體的布局，因為即使內容太少而無法填充空間，我希望紅色框和按鈕始終位於底部：
在第一張圖片中，如果文字很短，一切都很好。
現在，如果我們有一個巨大的文本，我真正想要的是整個頁面變得可滾動，並且紅色框和按鈕將放置在文本之后（保持我的 SizedBoxes 給定的所有間距）。
相反，我在中心的文字被剪掉了。
編輯：我剛剛注意到我的設計者布局基本上是谷歌的 Gmail 移動應用程序所做的，基本上如果 email 很短，Answer+Forward 按鈕將留在底部，但如果 Z0C83F57C786A17EBZ 是 longC 且可滾動，則在文末
我的代碼：
@override
Widget build(BuildContext context) {
final availableHeight = MediaQuery.of(context).size.height - kToolbarHeight - MediaQuery.of(context).padding.top - MediaQuery.of(context).padding.bottom;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(''),
),
body: SafeArea(
child: Container(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
height: availableHeight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 12,),
Row(
children: [
Expanded(
child: Text(
"title",
)
),
Container(
child: Text("after title"),
)
],
),
SizedBox(height: 32,),
Row(
children: [
Container(
width: 45,
height: 45,
decoration: BoxDecoration(
color: Colors.red,
),
),
SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Text("Name LastName"),
),
SizedBox(
width: 12,
),
Text(
"Date"
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text("subtitle")
),
SizedBox(
width: 50,
),
Icon(Icons.star)
],
)
],
),
),
],
),
SizedBox(
height: 30,
),
Expanded(
child: Text(_lorem),
),
Divider(
height: 40,
color: Colors.grey[400],
),
Wrap(
spacing: 20,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
],
),
SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(onPressed: () => Null, child: Text("press me")),
SizedBox(
width: 30
),
TextButton(onPressed: () => Null, child: Text("press me")),
],
)
],
),
),
),
),
)
);
}
如果內容大於高度，我不確定如何使此頁面可滾動，保持所有小部件的原始大小，但如果正文內容很短，則只需顯示正文並將按鈕保留在底部
2 個解決方案
解決方案1
0 2021-03-24 18:11:15
https://flutter.dev/docs/development/ui/widgets/scrolling這里有一些可滾動的小部件可能會有所幫助。
如果您希望底部的內容始終位於文本的底部，一種解決方案是將文本和底部的所有內容放入 ListView。
就像是：
Column(
children: <Widget>[
...
ListView(
children: <Widget>[
SizedBox(
height: 30,
),
Text(_lorem),
Divider(
height: 40,
color: Colors.grey[400],
),
...
],
)
...
],
)
但是，如果您是可滾動小部件的新手，那么您絕對應該研究一下，因為還有很多其他選擇可能更適合這種情況。
解決方案2
0 2021-03-24 18:33:40
請參考以下代碼
class View extends StatelessWidget {
@override
Widget build(BuildContext context) {
final availableHeight = MediaQuery.of(context).size.height -
kToolbarHeight -
MediaQuery.of(context).padding.top -
MediaQuery.of(context).padding.bottom;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(''),
),
body: SafeArea(
child: Container(
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
height: availableHeight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 12,
),
Row(
children: [
Expanded(
child: Text(
"title",
)),
Container(
child: Text("after title"),
)
],
),
SizedBox(
height: 32,
),
Row(
children: [
Container(
width: 45,
height: 45,
decoration: BoxDecoration(
color: Colors.red,
),
),
SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Text("Name LastName"),
),
SizedBox(
width: 12,
),
Text("Date"),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: Text("subtitle")),
SizedBox(
width: 50,
),
Icon(Icons.star)
],
)
],
),
),
],
),
SizedBox(
height: 30,
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Text(
"LLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet risus feugiat in ante. Euismod in pellentesque massa placerat. Ornare lectus sit amet est placerat in egestas erat. Non arcu risus quis varius quam quisque id diam. Diam maecenas ultricies mi eget mauris pharetra. Odio tempor orci dapibus ultrices. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Erat pellentesque adipiscing commodo elit at. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Erat pellentesque adipiscing commodo elit at. Ante metus dictum at tempor commodo. Vel pharetra vel turpis nunc eget. Mauris a diam maecenas sed enim ut sem viverra. In ante metus dictum at. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Et ultrices neque ornare aenean euismod. In ornare quam viverra orci sagittis. Non consectetur a erat nam at lectus urna duis. Quis auctor elit sed vulputate mi.At imperdiet dui accumsan sit amet nulla. Rhoncus dolor purus non enim praesent. Cursus eget nunc scelerisque viverra mauris in aliquam. Et ultrices neque ornare aenean euismod. Nisi vitae suscipit tellus mauris a diam maecenas sed. Ut diam quam nulla porttitor massa id neque. In cursus turpis massa tincidunt dui ut. Ut tortor pretium viverra suspendisse potenti. Massa massa ultricies mi quis hendrerit. Magna ac placerat vestibulum lectus. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Hac habitasse platea dictumst vestibulum rhoncus est. Turpis egestas pretium aenean pharetra magna ac placerat. Proin fermentum leo vel orci porta non pulvinar neque. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Elementum nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies.Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Blandit massa enim nec dui nunc mattis enim. Lectus magna fringilla urna porttitor rhoncus. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. In eu mi bibendum neque egestas. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. In cursus turpis massa tincidunt. Interdum posuere lorem ipsum dolor sit amet. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Quis commodo odio aenean sed. Molestie nunc non blandit massa enim nec. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Tincidunt ornare massa eget egestas purus viverra accumsan in. Etiam erat velit scelerisque in dictum non consectetur a. Aliquet risus feugiat in ante metus dictum at tempor commodo.Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. In aliquam sem fringilla ut morbi tincidunt. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Interdum velit euismod in pellentesque massa. Congue eu consequat ac felis donec et odio. Mauris a diam maecenas sed. Magna ac placerat vestibulum lectus mauris. Faucibus pulvinar elementum integer enim neque. Sem nulla pharetra diam sit amet. Facilisi etiam dignissim diam quis enim lobortis scelerisque. Etiam tempor orci eu lobortis elementum. Ac auctor augue mauris augue neque gravida in.Leo duis ut diam quam nulla porttitor massa. Ut tristique et egestas quis. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Facilisis volutpat est velit egestas. Gravida cum sociis natoque penatibus et magnis dis. At quis risus sed vulputate odio ut enim. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Vehicula ipsum a arcu cursus. Mauris ultrices eros in cursus. Id nibh tortor id aliquet lectus. Pellentesque habitant morbi tristique senectus et netus. Et odio pellentesque diam volutpat commodo sed egestas."),
Divider(
height: 40,
color: Colors.grey[400],
),
Wrap(
spacing: 20,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
],
),
SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () => Null, child: Text("press me")),
SizedBox(width: 30),
TextButton(
onPressed: () => Null, child: Text("press me")),
],
),
],
),
),
),
],
),
),
));
}
}
或者你也可以試試這個
class CompletePageScroll extends StatelessWidget {
@override
Widget build(BuildContext context) {
final availableHeight = MediaQuery.of(context).size.height -
kToolbarHeight -
MediaQuery.of(context).padding.top -
MediaQuery.of(context).padding.bottom;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(''),
),
body: SafeArea(
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
height: availableHeight,
child: Column(
children: [
SizedBox(
height: 12,
),
Row(
children: [
Expanded(
child: Text(
"title",
)),
Container(
child: Text("after title"),
)
],
),
SizedBox(
height: 32,
),
Row(
children: [
Container(
width: 45,
height: 45,
decoration: BoxDecoration(
color: Colors.red,
),
),
SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Text("Name LastName"),
),
SizedBox(
width: 12,
),
Text("Date"),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: Text("subtitle")),
SizedBox(
width: 50,
),
Icon(Icons.star)
],
)
],
),
),
],
),
SizedBox(
height: 30,
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Text(
"LLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet risus feugiat in ante. Euismod in pellentesque massa placerat. Ornare lectus sit amet est placerat in egestas erat. Non arcu risus quis varius quam quisque id diam. Diam maecenas ultricies mi eget mauris pharetra. Odio tempor orci dapibus ultrices. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Erat pellentesque adipiscing commodo elit at. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Erat pellentesque adipiscing commodo elit at. Ante metus dictum at tempor commodo. Vel pharetra vel turpis nunc eget. Mauris a diam maecenas sed enim ut sem viverra. In ante metus dictum at. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Et ultrices neque ornare aenean euismod. In ornare quam viverra orci sagittis. Non consectetur a erat nam at lectus urna duis. Quis auctor elit sed vulputate mi.At imperdiet dui accumsan sit amet nulla. Rhoncus dolor purus non enim praesent. Cursus eget nunc scelerisque viverra mauris in aliquam. Et ultrices neque ornare aenean euismod. Nisi vitae suscipit tellus mauris a diam maecenas sed. Ut diam quam nulla porttitor massa id neque. In cursus turpis massa tincidunt dui ut. Ut tortor pretium viverra suspendisse potenti. Massa massa ultricies mi quis hendrerit. Magna ac placerat vestibulum lectus. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Hac habitasse platea dictumst vestibulum rhoncus est. Turpis egestas pretium aenean pharetra magna ac placerat. Proin fermentum leo vel orci porta non pulvinar neque. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Elementum nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies.Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Blandit massa enim nec dui nunc mattis enim. Lectus magna fringilla urna porttitor rhoncus. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. In eu mi bibendum neque egestas. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. In cursus turpis massa tincidunt. Interdum posuere lorem ipsum dolor sit amet. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Quis commodo odio aenean sed. Molestie nunc non blandit massa enim nec. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Tincidunt ornare massa eget egestas purus viverra accumsan in. Etiam erat velit scelerisque in dictum non consectetur a. Aliquet risus feugiat in ante metus dictum at tempor commodo.Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. In aliquam sem fringilla ut morbi tincidunt. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Interdum velit euismod in pellentesque massa. Congue eu consequat ac felis donec et odio. Mauris a diam maecenas sed. Magna ac placerat vestibulum lectus mauris. Faucibus pulvinar elementum integer enim neque. Sem nulla pharetra diam sit amet. Facilisi etiam dignissim diam quis enim lobortis scelerisque. Etiam tempor orci eu lobortis elementum. Ac auctor augue mauris augue neque gravida in.Leo duis ut diam quam nulla porttitor massa. Ut tristique et egestas quis. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Facilisis volutpat est velit egestas. Gravida cum sociis natoque penatibus et magnis dis. At quis risus sed vulputate odio ut enim. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Vehicula ipsum a arcu cursus. Mauris ultrices eros in cursus. Id nibh tortor id aliquet lectus. Pellentesque habitant morbi tristique senectus et netus. Et odio pellentesque diam volutpat commodo sed egestas."),
Divider(
height: 40,
color: Colors.grey[400],
),
Wrap(
spacing: 20,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
),
),
],
),
SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () => Null,
child: Text("press me")),
SizedBox(width: 30),
TextButton(
onPressed: () => Null,
child: Text("press me")),
],
),
],
),
),
),
],
),
),
),
));
}
}
如何在 Flutter 中使擴展內的文本可滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.