Flutter语言学习应用中文本溢出自动换行的实现方案
解决Flutter中文本溢出自动换行的问题
嘿,我看了你的代码,文本溢出的问题主要是几个布局和文本设置的小问题导致的,咱们一步步来修复:
1. 移除硬编码的容器宽度
你在Container里设置了width: 45,这个宽度太小了,根本放不下正常长度的文本,直接删掉这个属性,让容器自适应父级空间就行。
2. 修正文本字号的不合理设置
第54行的fontSize: MediaQuery.of(context).size.width - 200会导致字号过大(比如屏幕宽360的话,字号就是160,完全超出容器),换成一个合理的固定值或者响应式写法,比如min(30, MediaQuery.of(context).size.width * 0.1),既保证适配不同屏幕,又不会过大。
3. 给Text组件明确开启自动换行
虽然softWrap默认是true,但明确加上更保险,同时可以添加textAlign: TextAlign.center让换行后的文本居中,视觉效果更和谐。如果需要限制最大行数,还可以加上maxLines属性。
4. 调整布局细节,给文本足够空间
移除CarouselSlider item外层不必要的Expanded,给容器添加左右内边距避免文本贴边,在多行文本之间增加间距,避免拥挤。
修改后的完整代码
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:getwidget/getwidget.dart'; class selamlasmaLearn_2 extends StatefulWidget { @override State<selamlasmaLearn_2> createState() => _selamlasmaLearn_1State(); } class _selamlasmaLearn_1State extends State<selamlasmaLearn_2> { final CarouselController _controller = CarouselController(); List<wordAndMeaning> wordsList = [ wordAndMeaning("How's it going?", "Nasıl gidiyor?", false), wordAndMeaning("How's your day?", "Günün nasıldı?", false), wordAndMeaning("How's your day going?", "Günün nasıl gidiyor?", false), wordAndMeaning("Nice to see you", "Seni görmek güzel", false), wordAndMeaning("It's been a while", "Görüşmeyeli uzun zaman oluyor", false), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.amber[500], bottomOpacity: 0, leading: IconButton( icon: Icon(Icons.arrow_back_ios), onPressed: () { Navigator.pop(context); }, ), title: Text("Selamlama", style: TextStyle(fontSize: 25),), ), backgroundColor: Colors.amber, body: Builder(builder: (context) { final double height = MediaQuery.of(context).size.height - 160; return Column( children: [ Expanded( child: CarouselSlider( carouselController: _controller, options: CarouselOptions( height: height, viewportFraction: 1.0, enlargeCenterPage: false, ), items: wordsList.map((wordAndMeaning word) { return Builder( builder: (BuildContext context) { return Container( decoration: BoxDecoration(color: Colors.amber), padding: EdgeInsets.symmetric(horizontal: 20), child: Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Column( mainAxisSize: MainAxisSize.min, children: [ if (word.showMeaning) ...[ Text( word.meaning, style: TextStyle( fontSize: min(30, MediaQuery.of(context).size.width * 0.1), color: Colors.white ), softWrap: true, textAlign: TextAlign.center, ), SizedBox(height: 10), Text( word.word, style: TextStyle(fontSize: 20, color: Colors.white), softWrap: true, textAlign: TextAlign.center, ), ], if (!word.showMeaning) ...[ Text( word.word, style: TextStyle( fontSize: 45, color: Colors.white ), softWrap: true, textAlign: TextAlign.center, ), ], ), ), const SizedBox( width: 10, ), IconButton( icon: Icon(Icons.remove_red_eye_sharp), color: Colors.white, iconSize: 25, onPressed: () { setState(() { word.showMeaning = !word.showMeaning; }); }, ), ], ), ); }, ); }).toList(), ), ), Container( padding: EdgeInsets.all(5), decoration: BoxDecoration( border: Border.all(color: Colors.white), borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20)), color: Colors.amber[300], ), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( decoration: BoxDecoration( border: Border.all(color: Colors.white), borderRadius: BorderRadius.circular(10), ), width: 130, height: 60, child: Container( child: GFButton( icon: Icon(Icons.arrow_back_ios), text: "Geri", textStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 24), onPressed: () => _controller.previousPage( duration: const Duration(milliseconds: 100), curve: Curves.easeInCirc, ), size: GFSize.LARGE, ), ), ), SizedBox( width: 10, ), SizedBox( width: 10, ), Container( decoration: BoxDecoration( border: Border.all(color: Colors.white), borderRadius: BorderRadius.circular(10), ), width: 130, height: 60, child: Container( child: GFButton( icon: Icon(Icons.arrow_forward_ios), text: "İleri", textStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 24), onPressed: () => _controller.nextPage( duration: const Duration(milliseconds: 100), curve: Curves.easeInCirc, ), size: GFSize.LARGE, ), ), ), ], ), ], ), ) ], ); }), ); } } class wordAndMeaning { String word; String meaning; bool showMeaning; wordAndMeaning(this.word, this.meaning, this.showMeaning); }
现在测试一下,不管是长文本还是不同屏幕尺寸,文本都会自动换行了,视觉效果也更舒适。
内容的提问来源于stack exchange,提问作者Emir Bolat




