本文介绍了Flutter - 不能使用 Flexible inside Padding 进行文本换行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的 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: E​​dgeInsets(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 ←⋯

那么我怎样才能正确地换行呢? 如果没有换行问题,代码可以正常工作.

我的预期布局似乎如下图所示:

让我给你一个关于布局的更精确的想法:

从 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 进行文本换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-31 06:12