[英]Flutter Wrap widget inside Row widget
我想實現這種行為。 我一行有 4 個項目,但我希望中間的兩個文本像 Wrap 小部件中的 yare 一樣,如果text1
很長並填充所有空格,則text2
移動到下一行。
這是我的代碼,但它溢出而不是將文本包裝成兩行
Widget _buildItem(String name, String status) {
return Container(
padding: const EdgeInsets.all(Dimens.unitX2),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: Dimens.unitX5,
height: Dimens.unitX5,
color: Colors.blue,
),
SizedBox(width: Dimens.unitX1),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
spacing: Dimens.unitX1,
direction: Axis.horizontal,
children: [
Text(name),
Text(status),
],
),
SizedBox(width: Dimens.unitX1),
Container(
color: Colors.red,
width: Dimens.unitX5,
height: Dimens.unitX5,
),
],
),
);
}
將Wrap
小部件包裝在一個Flexible
中:
...
Flexible(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
spacing: 30,
direction: Axis.horizontal,
children: [
Text('Text1'),
Text('Text2 is a long text'),
],
),
),
...
用Expanded
小部件包裝您的Wrap
小部件:
Widget _buildItem(String name, String status) {
return Container(
padding: const EdgeInsets.all(Dimens.unitX2),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: Dimens.unitX5,
height: Dimens.unitX5,
color: Colors.blue,
),
SizedBox(width: Dimens.unitX1),
Expanded(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
spacing: Dimens.unitX1,
direction: Axis.horizontal,
children: [
Text(name),
Text(status),
],
),
),
SizedBox(width: Dimens.unitX1),
Container(
color: Colors.red,
width: Dimens.unitX5,
height: Dimens.unitX5,
),
],
),
);
}
利用
Wrap(
alignment : WrapAlignment.spaceBetween
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.