flutter - 如何让容器填充一行中可用的垂直空间?
问题描述
谁能帮我吗?
我正在努力弄清楚如何让彩色容器延伸以匹配其行中最高容器的高度。
目前它们没有固定的高度/宽度,并且被包裹在扩展的小部件中以获得它们的动态大小。
如果可能的话,我想保持他们的响应大小。一旦屏幕足够小,我已经有一种方法可以切换到列而不是行。一旦在一个列中,我可以使用width: double.infinity
,因为没有水平滚动..
这是使用的代码示例(对不起,有这么多!):
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollbar(
child: CustomScrollView(
slivers: <Widget>[
SliverNavBar(),
SliverList(
delegate: SliverChildListDelegate(
[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: _homePageContent(),
);
Footer()
],
),
),
],
),
),
);
}
}
_homePageContent() {
return <Widget>[
_HomePageInfoBox(
backgroundColor: accentColor,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum...',
),
_HomePageInfoBox(
backgroundColor: primaryColorDark,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum....',
),
_HomePageInfoBox(
backgroundColor: primaryColor,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum...',
),
];
}
class _HomePageInfoBox extends StatelessWidget {
const _HomePageInfoBox({
Key key,
@required this.title,
@required this.body,
@required this.backgroundColor,
}) : super(key: key);
final String title;
final String body;
final Color backgroundColor;
@override
Widget build(BuildContext context) {
return Expanded(
Container(
color: backgroundColor,
child: Padding(
padding: const EdgeInsets.all(50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
color: primaryTextColor,
fontSize: 25,
fontFamily: 'CoffeeAndTea'),
),
SizedBox(height: 10),
Text(
body,
style: TextStyle(
color: primaryTextColor,
fontSize: 24,
height: 1.4,
fontFamily: 'ElegantSans'),
),
SizedBox(height: 20),
Text(
"Let's Go!",
style: TextStyle(
color: Colors.white, fontFamily: 'CreamCake', fontSize: 30),
textAlign: TextAlign.center,
),
],
),
),
),
);
}
}
解决方案
使用小部件将行项目高度调整为最大的一个包裹行IntrinsicHeight
:
IntrinsicHeight(
child:Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _homePageContent(),
),
),
这是 dartpad 演示。
推荐阅读
- html - 为什么我的导航不与其他两列对齐?
- swift - MacOS - 在 Swift 中检索 Sandbox App 的 Container 文件夹
- java - 如何在 android studio 中使用 MPAndroidChart 创建股票图表?
- vue.js - 超出 Vue 3 插槽最大调用堆栈大小
- wordpress - Divi this.props.moduleInfo.order 没有改变
- html - 偏移路径的 CSS 媒体查询
- autohotkey - 我想用 AHK 为泰拉瑞亚创建一个宏,但游戏有某种保护
- localization - 如何在 Hybris 中创建新语言?
- node.js - 如何将 Angular 和 Express 项目部署到谷歌应用引擎
- vb.net - 如果选择了某些树视图节点,如何隐藏组框?