颤振-不能使用灵活的内部填充进行文本换行 [英] Flutter - cannot use Flexible inside Padding for text wrapping purpose
本文介绍了颤振-不能使用灵活的内部填充进行文本换行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的flutter应用程序中，我想要一张卡片和四个水平对齐的框，其中的宽度和高度相等.代码如下；
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)),
),
),
],
),
),
],
)
),
),
],
),
],
),
我使用Flexible的原因是我希望在必要时将文本包装成多行.
The reason I used Flexible is that I wanted the text to be wrapped in multiple lines where necessary.
但是我得到这个错误:
════════小部件库捕获到异常══════════════════════════════════ ═════════════════════ 抛出以下断言来构建Container(填充:EdgeInsets(0.0，40.0，0.0，0.0)，bg:BoxDecoration(color:MaterialColor(主值:Color(0xfff44336))))，约束条件:BoxConstraints(0.0< = w< =无穷大，h = 150.0)): 不正确使用ParentDataWidget.
════════ 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.
柔性小部件必须直接放置在Flex小部件内部. Flexible(无深度，flex:1，脏)具有Flex祖先，但它们之间还有其他小部件: -填充(填充:EdgeInsets(0.0，25.0，0.0，0.0)) 这些小部件不能介于Flex及其Flex之间. 有问题的Flexible的父级的所有权链为: 填充←行←中心←列←填充←DecoratedBox←ConstrainedBox←容器←展开←行←⋯
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 ← ⋯
所以我该如何正确包装文本? 没有包装问题，代码就可以很好地工作.
我的预期布局看起来像下面的图片:
My intended layout seems to be like the image below :
Edit2: 让我给您一个关于布局的更精确的想法:
Let me give you a more precise idea about the layout:
Edit3: 在pskink的聊天室中找到解决方案(请参见此处)之后，我的布局如下.看到红色标记的部分不会使文本居中对齐.如何以居中方式对齐文本?
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 ?
推荐答案
请尝试一下...
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
],
),
)));
}
只需复制粘贴代码，看看发生了什么... 愿这对您有帮助.
Just copy paste code and see what happening... May this will help you.
这篇关于颤振-不能使用灵活的内部填充进行文本换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
