Flutter - 不能使用灵活的内部填充来进行文本换行
Posted
技术标签:
【中文标题】Flutter - 不能使用灵活的内部填充来进行文本换行【英文标题】：Flutter - cannot use Flexible inside Padding for text wrapping purpose 【发布时间】：2020-06-17 17:33:56 【问题描述】：在我的 Flutter 应用程序中，我想要一张卡片和四个水平对齐的盒子，里面的宽度和高度相等。代码如下；
@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 的原因是我希望在必要时将文本换成多行。
但我收到此错误：
════════小部件库捕获的异常═════════════════════════════════════ ═════════════════════ 构建 Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), 约束: BoxConstraints(0.0
Flex 小部件必须直接放在 Flex 小部件中。 Flexible(no depth, flex: 1, dirty) 有一个 Flex 祖先，但它们之间还有其他小部件： - 填充（填充：EdgeInsets（0.0, 25.0, 0.0, 0.0）） 这些小部件不能介于 Flexible 和它的 Flex 之间。 违规灵活的父级的所有权链是： 填充 ← 行 ← 中心 ← 列 ← 填充 ← DecoratedBox ← ConstrainedBox ← 容器 ← Expanded ← Row ←⋯
那么我怎样才能正确地换行呢？ 如果没有换行问题，代码可以正常工作。
编辑： 我的预期布局似乎如下图所示：
编辑2： 让我给你一个关于布局的更精确的想法：
编辑3： 从 pskink 在聊天室中获得解决方案（请参阅 here ）后，我有以下布局。看到红色标记的部分没有使文本以居中方式对齐。如何居中对齐文本？
【问题讨论】：
@pskink，在 OP 中添加了一张图片。您在图像中看到“浏览数据库”标题包含在 2 行中。我需要这样的包装。我在代码中使用的字幕与图片中的字幕有些不同。 所以如果你有 3 个项目水平放置，那么你需要一个Row 作为 Card 的直接子代，而不是 Column
@pskink，想象一下我的应用程序将在图像中一个接一个地具有类似的布局。这就是我使用`Column`的原因
我不明白你的意思：我只看到水平放置的 3 个项目 - 每个项目都包含一个图像和下面的文本
@pskink，添加了带有应用实际预期外观图像的 Edit2
【参考方案1】：
在文本小部件中尝试textAlign: TextAlign.center,
【讨论】：
【参考方案2】：请试试这个...
@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,
),
),
),
),
),
),
],
)
],
),
),
],
),
)));
只需复制粘贴代码，看看会发生什么... 希望这会对你有所帮助。
【讨论】：
【参考方案3】：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,
))
],
),
),
),
],
),
),
],
)),
),
)
我对你所需要的方法：
【讨论】：
您没有使用任何 ScrollView（即 ListView）。不会导致溢出错误吗？ 这是你应该把它放在列表视图或列中的小部件，这是代码的一部分 您的意思是在小部件或页面内溢出？ 我的意思是屏幕 @pskink，来自 pskink，在聊天讨论中，我得到了一个解决方案：paste.ubuntu.com/p/KcngFFDXcD。你能展示如何将图像下方的文本居中对齐吗？以上是关于Flutter - 不能使用灵活的内部填充来进行文本换行的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 组件: Autocomplete 自动填充 | 开发者说·DTalk
Flutter 组件: Autocomplete 自动填充 | 开发者说·DTalk