Flutter布局：将两个小部件并排显示
Flutter布局：将两个小部件并排显示
我正在尝试创建一个简单的布局，将2个小部件插入到同一行中，我使用了Row来实现这一点，但我得到了以下错误：
在执行performLayout()期间抛出了以下断言：
BoxConstraints强制使用无限宽度。这些无效的约束条件
通过以下函数提供给RenderSemanticsAnnotations的layout()函数，该函数可能会计算出无效的约束条件：RenderConstrainedBox.performLayout。有问题的约束是：BoxConstraints(w=Infinity, 50.0<=h<=Infinity)
但是如果我不使用Row小部件，只渲染小部件，那么一切都会按预期进行渲染。
class CardWithTitle extends StatelessWidget {
const CardWithTitle({Key key, this.title, this.child}) : super(key: key);
final String title;
final child;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Row(
children: [
Text(title),
],
),
Container(
width: double.infinity,
constraints: BoxConstraints(minHeight: 50),
child: Card(
child: Padding(
padding: EdgeInsets.all(10.0),
child: child,
),
),
)
],
),
);
}
}
class SellsCard extends StatelessWidget {
SellsCard({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10.0),
child: CardWithTitle(
title: 'Sells',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Total',
),
Text(
'\$ 96.500,54'
),
Text(
'Lorem ipsum dolor'
)
],
),
),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State
String _username;
String _title;
String _usernameAbbr;
@override
Widget build(BuildContext context) {
_username = 'James';
_title = 'Some title';
_usernameAbbr = _username[0].toUpperCase();
return Scaffold(
appBar: AppBar(
title: Text(_title),
elevation: 0,
actions: [
Padding(
padding: EdgeInsets.all(20.0),
child: GestureDetector(
onTap: () {},
child: CircleAvatar(
backgroundColor: Theme.of(context).backgroundColor,
radius: 10.0,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(_usernameAbbr),
),
),
))
],
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SellsCard(), // <-- this is working
SellsCard(), // <-- this is working
Row(children: [SellsCard(), SellsCard()]) // <-- This is throwing the errors
],
),
),
);
}
}
这是我试图创建的布局结构：
请问我做错了什么或者如何将这两个项目放在同一行中。
Flutter布局：如何在一行中渲染两个小部件
在Flutter中，如果我们想要在一行中渲染两个Widget，我们通常会使用Row小部件。然而，有时候我们会遇到这样的问题：两个小部件无法并排显示。要解决这个问题，我们需要将Row的子部件包裹在Expanded小部件中。
代码示例：
Row(
children: [
Expanded(
child: SellsCard(),
),
Expanded(
child: SellsCard(),
),
]
)
这段代码中，我们使用了Expanded小部件来包裹SellsCard小部件。这样做的作用是将Row的可用空间均匀地分配给两个小部件，使它们能够并排显示。
为什么需要使用Expanded小部件呢？原因是在Flutter中，Row小部件默认会将子部件的大小限制为它们的原始大小。如果我们不使用Expanded小部件，那么两个小部件将只能按照它们的原始大小进行渲染，无法并排显示。
通过使用Expanded小部件，我们可以告诉Row小部件将可用空间按比例分配给子部件，使它们能够并排显示。这样，我们就能够在一行中渲染两个小部件了。
总结起来，解决这个问题的方法就是使用Expanded小部件来包裹Row的子部件。这样可以确保子部件能够按比例分配可用空间，实现并排显示的效果。