Flutter - 不能使用 Flexible inside Padding 进行文本换行 [英] Flutter - cannot use Flexible inside Padding for text wrapping purpose
问题描述
在我的 Flutter 应用程序中，我想要一张卡片和四个水平对齐的盒子，里面的宽度和高度相等.代码如下；
@override小部件构建(BuildContext 上下文){返回材料应用程序(家:脚手架(身体:容器(填充:EdgeInsets.fromLTRB(20,10,10,0),身高:220，宽度:double.maxFinite，孩子:卡片(海拔:5，孩子:列(孩子们:<小部件>[排(孩子们:<小部件>[展开(孩子:容器(身高:25，颜色:颜色(0xff6898F7)，child: Text('在线药房',样式:文本样式(颜色:颜色(0xffffffff)))))],),排(孩子们:<小部件>[展开(弹性:1，孩子:容器(身高:150，填充:EdgeInsets.only(顶部:40)，颜色:颜色.红色，孩子:列(孩子们:<小部件>[Image.asset("images/medicine.jpg"),中心(孩子:行(mainAxisAlignment: MainAxisAlignment.center,孩子们:<小部件>[填充(填充:EdgeInsets.only(顶部:25)，孩子:灵活(child:Text('Medicine', style: TextStyle(color: Colors.white)),),),],),),],)),),],),],),我使用 Flexible 的原因是我希望在必要时将文本换成多行.
但我收到此错误:
════════ 小部件库捕获的异常═════════════════════════════════════════════════════构建 Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), 约束: BoxConstraints(0.0<=w<=无穷大，h=150.0)):ParentDataWidget 使用不正确.
Flex 小部件必须直接放在 Flex 小部件中.Flexible(no depth, flex: 1, dirty) 有一个 Flex 祖先，但它们之间还有其他小部件:- 填充(填充:EdgeInsets(0.0, 25.0, 0.0, 0.0))这些小部件不能介于 Flexible 和它的 Flex 之间.违规灵活的父级的所有权链是:填充 ← 行 ← 中心 ← 列 ← 填充 ← DecoratedBox ← ConstrainedBox ← 容器 ← Expanded ← Row ←⋯
那么我怎样才能正确地换行呢? 如果没有换行问题，代码可以正常工作.
我的预期布局似乎如下图所示:
让我给你一个关于布局的更精确的想法:
从 pskink 在聊天室中获得解决方案(请参阅
Padding(填充:常量 EdgeInsets.all(8.0)，孩子:材料(海拔:5.0，孩子:容器(//高度:220,孩子:列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[容器(填充:EdgeInsets.symmetric(水平:8.0)，身高:25，颜色:颜色(0xff6898F7)，孩子:行(mainAxisAlignment: MainAxisAlignment.spaceBetween,孩子们:<小部件>[文本(在线药房"，样式:文本样式(颜色:颜色(0xffffffff)，),),文本('你隐藏的文字大声笑'，样式:文本样式(颜色:颜色(0xffffffff)，),),],),),容器(高度:150.0，孩子:行(孩子们:<小部件>[展开(孩子:容器(填充:EdgeInsets.all(8.0)，孩子:列(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,孩子们:<小部件>[//你可以用图标代替图片// 容器(//高度:80，//孩子:Image.asset(//images/medicine.jpg",//适合:BoxFit.fill,//),//),图标(Icons.touch_app,尺寸:40.0，),大小盒(高度:10.0)，灵活的(孩子:文本('浏览数据库',textAlign: TextAlign.center,))],),),),展开(孩子:容器(填充:EdgeInsets.all(8.0)，孩子:列(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,孩子们:<小部件>[//你可以用图标代替图片// 容器(//高度:80，//孩子:Image.asset(//images/medicine.jpg",//适合:BoxFit.fill,//),//),图标(图标输入，尺寸:40.0，),大小盒(高度:10.0)，灵活的(孩子:文本('键入你自己的药'，textAlign: TextAlign.center,))],),),),展开(孩子:容器(填充:EdgeInsets.all(8.0)，孩子:列(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,孩子们:<小部件>[//你可以用图标代替图片// 容器(//高度:80，//孩子:Image.asset(//images/medicine.jpg",//适合:BoxFit.fill,//),//),图标(图标.图像，尺寸:40.0，),大小盒(高度:10.0)，灵活的(孩子:文本('你的处方图片'，textAlign: TextAlign.center,))],),),),],),),],)),),)我对你所需要的方法:
In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
padding: EdgeInsets.fromLTRB(20,10,10,0),
height: 220,
width: double.maxFinite,
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height:25,
color:Color(0xff6898F7),
child: Text('Online Pharmacy',
style:TextStyle(color: Color(0xffffffff)))
)
)
],
),
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 150,
padding: EdgeInsets.only(top:40),
color: Colors.red,
child: Column(
children: <Widget>[
Image.asset("images/medicine.jpg"),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:EdgeInsets.only(top:25),
child:Flexible(
child:Text('Medicine', style: TextStyle(color: Colors.white)),
),
),
],
),
),
],
)
),
),
],
),
],
),
The reason I used Flexible is that I wanted the text to be wrapped in multiple lines where necessary.
But I get this error :
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════ The following assertion was thrown building Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), constraints: BoxConstraints(0.0<=w<=Infinity, h=150.0)): Incorrect use of ParentDataWidget.
Flexible widgets must be placed directly inside Flex widgets. Flexible(no depth, flex: 1, dirty) has a Flex ancestor, but there are other widgets between them: - Padding(padding: EdgeInsets(0.0, 25.0, 0.0, 0.0)) These widgets cannot come between a Flexible and its Flex. The ownership chain for the parent of the offending Flexible was: Padding ← Row ← Center ← Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Expanded ← Row ← ⋯
So how can I wrap the text properly ? Without the wrapping issue, code works well.
EDIT: My intended layout seems to be like the image below :
Edit2: Let me give you a more precise idea about the layout:
Edit3: After getting a solution ( see here ) in chat room from pskink , I had the following layout. See that the red marked part does not get the text aligned in a centered fashion. How to align text in a centered way ?
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
elevation: 5.0,
child: Container(
// height: 220,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 8.0),
height: 25,
color: Color(0xff6898F7),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Online Pharmacy',
style: TextStyle(
color: Color(0xffffffff),
),
),
Text(
'your hidden text lol',
style: TextStyle(
color: Color(0xffffffff),
),
),
],
),
),
Container(
height: 150.0,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.touch_app,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Browse Through Database',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.input,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Type your own medicine',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.image,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Picture of your prescription',
textAlign: TextAlign.center,
))
],
),
),
),
],
),
),
],
)),
),
)
That my approach to what you need:
这篇关于Flutter - 不能使用 Flexible inside Padding 进行文本换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
