英文:
Text goes out of Textfield - Flutter
问题
我有一个位于容器中心的文本字段。我的问题是，当我减小屏幕的高度时，文本字段中的文本越来越超出边界。我用一个容器包裹了文本字段并给它上色，看起来文本字段能正确地适应变化以适应容器，但文本或文本字段的输入行为独立运行，并随着高度的调整而超出边界。有解决方案吗？
Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(height: height * 0.076823398741207,width: width * 0.414674703803783,decoration: BoxDecoration(color: Color.fromARGB(212, 17, 19, 57),borderRadius: BorderRadius.circular(20),),child: Center(child: Row(children: [Expanded(child: TextField(style: TextStyle(color: Colors.white,fontSize: width * 0.0103928497193931,),decoration: InputDecoration(filled: true,fillColor: Colors.red,constraints: BoxConstraints(minHeight: 120,),contentPadding: EdgeInsets.only(left: width * 0.0166285595510289,),border: InputBorder.none,),),),],),),),],)
我尝试了许多解决方案，如用SingleChildScrollView包裹它，设置maxLines和minLines，但都没有用。唯一似乎能稍微改变文本行为的事情是在文本字段的InputDecorator的约束中设置maxHeight和minHeight。
英文:
So I have a textfield that is positionned in the center of a Container. My problem is the more I decrease the height of my screen the more the text of the textfiled goes out of the boundaries. I wrapped the textfiled with a container and gave it a color and it seems that the textfield is correctly adapting to the changes to fit the container but the Text or the input of the textfiled behaves on its own and goes out of the boundaries the more i adjust the height. Any solution ?
Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(height: height * 0.076823398741207,width: width * 0.414674703803783,decoration: BoxDecoration(color: Color.fromARGB(212, 17, 19, 57),borderRadius: BorderRadius.circular(20),),child: Center(child: Row(children: [Expanded(child: TextField(style: TextStyle(color: Colors.white,fontSize: width *0.0103928497193931,),decoration: InputDecoration(filled: true,fillColor: Colors.red,constraints: BoxConstraints(minHeight: 120),contentPadding:EdgeInsets.only(left: width *0.0166285595510289,),border: InputBorder.none,),),),],),),),)
I tried a lot of solutions such as wrapping it with a SingleChildScrollView, setting maxlines and minlines but nothing. The only thing that seems to change a little bit the behaviour of the text is setting maxHeight and minheight in the constraints of the InputDecorator of the textfield.
答案1
得分: 0
请尝试在您的“build”中这样做，而不是提供fontSize: width * 0.01...，否则上下文将无法访问。
final cellHeight = MediaQuery.of(context).size.height / 100;final cellWidth = MediaQuery.of(context).size.width / 100;
通过这样做，您创建了两个变量，它们代表屏幕宽度或高度的1/100（响应式）。然后，您可以将您喜欢的fontSize与cellHeight或cellWidth相乘，确保fontSize是响应式的。
Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(height: cellHeight * 8, // 例子width: cellWidth * 20, // 例子decoration: BoxDecoration(color: Color.fromARGB(212, 17, 19, 57),borderRadius: BorderRadius.circular(20),),// ...child: TextField(style: TextStyle(color: Colors.white,fontSize: cellWidth * 7, // 例子),decoration: InputDecoration(filled: true,// ...contentPadding: EdgeInsets.only(left: 5 * cellWidth, // 例子),border: InputBorder.none,),),),],),
如果这解决了您的问题，请告诉我。如果没有，请在您的问题中提供更多详细信息，愉快的编码！
英文:
Instead of giving fontSize: width * 0.01..., try doing like so in your build (or the context won't be accessible)
final cellHeight = MediaQuery.of(context).size.height / 100;final cellWidht = MediaQuery.of(context).size.width / 100;
By doing so you create 2 variables that represent 1/100 of your screen width or height (responsive).
You can then multiply your cellHeight or cellWidth with the fontSize you prefer, grating the fontSize will be responsive.
Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(height: cellHeight * 8, <-- EXAMPLEwidth: cellWidth * 20, <-- EXAMPLEdecoration: BoxDecoration(color: Color.fromARGB(212, 17, 19, 57),borderRadius: BorderRadius.circular(20),),....child: TextField(style: TextStyle(color: Colors.white,fontSize: cellWidth * 7, <-- EXAMPLE),decoration: InputDecoration(filled: true,....contentPadding:EdgeInsets.only(left: 5 * cellWidth, <-- EXAMPLE),border: InputBorder.none,),),),],),),),)
Let me know if this solve your problem, if not, update your question with more details about what's wrong, happy coding!
答案2
得分: 0
解决方案是在 InputDecoration 中将 isDense 设置为 true。
英文:
The solution was to set isDense to true in the InputDecoration.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论