有人可以帮我吗?
我正在努力弄清楚如何使彩色容器能够扩展以匹配其行中最高的容器的高度。
当前它们没有固定的高度/宽度,并且被包装在Expanded小部件中以获取其动态大小。
如果可能的话,我想保持他们的响应能力。一旦屏幕足够小,我已经有一种方法可以切换到列而不是行。进入“列”后,由于没有水平滚动,因此可以使用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,
),
],
),
),
),
);
}
}
答案 0 :(得分:2)
使用IntrinsicHeight
小部件将行项目的高度调整为最大一排项目:
IntrinsicHeight(
child:Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _homePageContent(),
),
),
Here是dartpad演示。
答案 1 :(得分:1)
用Text
包裹您的身体Expanded
小部件。由于您的父母Widget
是Column
,因此Expanded
将为该小部件提供所有可用的垂直空间。
Expanded(
child: Text(
body,
style: TextStyle(
color: primaryTextColor,
fontSize: 24,
height: 1.4,
fontFamily: 'ElegantSans'),
),
),
或者您可以对"Let's Go!"
Text
小部件执行此操作,以免该小部件一直到屏幕下方。
已更新:
请注意,您可以使用IntrinsicHeight
作为提及的其他答案,但是我总是尝试避免使用它,因为该类相对昂贵。这是来自doc的原因:
此类相对昂贵,因为它增加了投机性 在最终布局阶段之前进行布局传递。避免在哪里使用它 可能。在最坏的情况下,此小部件可能会导致布局 在树的深度是O(N²)。