You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动