Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Flutter -溢出列中展开的小部件内的文本

Flutter -溢出列中展开的小部件内的文本
EN

Stack Overflow用户
提问于 2018-09-06 14:21:11
回答 3查看 13.9K关注 0票数 12

我想要实现的是在固定高度的列中有一个文本小部件。当文本很长时,我希望设置为TextOverflow.ellipsisoverflow属性起作用。文本小部件将其maxLines属性设置为一个较高的值,以允许其向下换行。但是列中还有其他小部件,在文本小部件之前和之后都有。文本小部件位于展开的小部件中,因此它在列中占据了尽可能多的空间。完整的代码粘贴在下面。

这种设置的问题是文本溢出了它的容器父级。我在容器上有一个边框装饰,它显示了这种情况。为什么会发生这种情况,我该如何修复它。

代码语言:javascript
运行
AI代码解释
复制
import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Overflow"),
        ),
        body: Center(
          child: Container(
              width: 200.0,
              height: 250.0,
              child: Card(
                  child: Column(children: <Widget>[
                Image.asset(
                  "assets/bereket.jpg",
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
                Expanded(
                    child: Container(
                        padding: EdgeInsets.all(8.0),
                        child: (Column(
                          children: [
                            Text(
                                "በረከት ስምኦን፡ «ወይዘሮ አና ጎሜዝ፤ እርስዎ አያገባዎትም! አርፈው ይቀመጡ በልልኝ»",
                                maxLines: 2,
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .subhead
                                    .copyWith(
                                      color: Colors.black,
                                    ),
                                overflow: TextOverflow.ellipsis),
                            Expanded(
                                child: Container(
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.green, width: 2.0),
                                    ),
                                    child: Text(
                                      """ባለፉት ሁለት አስርት ዓመታት በኢትዮጵያ ፖለቲካ ከፍተኛ ተጽእኖ ፈጣሪ የነበሩት አቶ በረከት ስምኦን በቅርቡ ከብአዴን ማእከላዊ ኮሚቴ አባልነት መታገዳቸው ይታወሳል።

አቶ በርከት የብአዴን ውሳኔን በተመለከተ እና የወደፊት የፖለቲካ ህይወታቸው ምን ሊሆን እንደሚችል ለቢቢሲ አጋርተዋል።""",
                                      maxLines: 10,
                                      style: Theme.of(context)
                                          .primaryTextTheme
                                          .caption
                                          .copyWith(color: Colors.black),
                                      overflow: TextOverflow.ellipsis,
                                    ))),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  width: 20.0,
                                  height: 20.0,
                                  child: Image.asset("assets/bbc.png"),
                                ),
                                SizedBox(width: 8.0),
                                Text('ቢቢሲ - ከሁለት ሰአት በፊት',
                                    style: Theme.of(context)
                                        .textTheme
                                        .caption
                                        .copyWith(fontSize: 10.0))
                              ],
                            )
                          ],
                        ))))
              ]))),
        ),
      ),
    );
  }
}

EN

回答 3

Stack Overflow用户

发布于 2018-10-21 14:58:51

尝试用“Flexible”而不是“expandable”来包装你的列。

我也遇到了同样的问题,因为列中的文本溢出,并且允许使用'flexible‘来使文本更小。

代码语言:javascript
运行
AI代码解释
复制
         Flexible(
          child: Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Name',
                    style: CustomTextStyle.blueTitle14(context),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 4.0),
                  child: Text('Long text'),
                ),
              ],
            ),
          ),
        ),
票数 24
EN

Stack Overflow用户

发布于 2018-09-07 12:48:57

根据我的经验,根据这篇文章,你应该为包含溢出文本的Container分配一个固定的宽度。Flutter- wrapping text

票数 0
EN

Stack Overflow用户

发布于 2021-04-21 19:47:36

删除该行中的enter-bar('\n'),此行将为省略号。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52206221

复制
相关文章
Serverless DB 设计解读和实战
哈喽小伙伴们,我们都知道数据库在项目开发中往往是不可或缺的一环,而在云计算热度不断提升的背景之下,我们对于使用数据库的成本以及灵活性有了更高的要求。 Serverless 团队近期新发布了两款组件来填补这最关键的一块拼图 —— Serverless DB! 下面我们一起来看看吧! Serverless PostgreSQL 组件 PostgreSQL for Serverless 是一款基于 PostgreSQL 数据库实现的按需分配资源的数据库产品,其数据库将根据用户的实际请求数来自动分配资源。通过 P
腾讯云serverless团队
2020/05/15
1.5K0
抢跑Serverless DB,腾讯云打的什么算盘?
但这种格局只是建立在当前的技术背景之上,新的云计算架构理念——Serverless正在全球范围内铺开,行业在迎来新的竞争变局。
曾响铃
2020/04/14
1.2K0
抢跑Serverless DB,腾讯云打的什么算盘?
db2 日志管理
DB2日志是以文件的形式存放在文件系统中,分为两种模式:循环日志和归档日志。当创建新数据库时,日志的缺省模式是循环日志。在这种模式下,只能实现数据库的脱机备份和恢复。如果要实现联机备份和恢复,必须设为归档日志模式。
全栈程序员站长
2022/07/01
3.4K0
db2 日志管理
如何用Serverless搭建Mock server
无服务器Serverless是一种云原生开发模型,可使开发人员专注构建和运行应用,而无需管理服务器。
WoodyWoody
2022/01/18
9800
[82]redis中如何切换db
一台服务器上都快开启200个redis实例了,看着就崩溃了。这么做无非就是想让不同类型的数据属于不同的应用程序而彼此分开。
周小董
2022/04/12
1.5K0
[82]redis中如何切换db
Serverless + Egg.js 后台管理系统实战
作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它的高扩展性和丰富的插件,极大的提高了开发效率。开发者只需要关注业务就好,比如要使用 redis,引入 egg-redis 插件,然后简单配置就可以了。正因为如此,第一次接触它,我便喜欢上了它,之后也用它开发过不少应用。 有了如此优秀的框架,那么如何将一个 Egg.js 的服务迁移到 Serverless 架构上呢? 背景 我在文章《基于 Serverless Com
腾讯云serverless团队
2020/03/20
4.5K0
Serverless现状和如何高效开发
汇总我近几年因项目原因在腾讯云针对serverless(腾讯云SCF)的提交工单最少三百个以上,上至SCF内部运营BUG, 下至腾讯云SDK 均被我找出过致命BUG, 甚至现在出现问题后,我都能直接定位出大致问题出现的原因,且通过工单验证基本是准确的.他们的客服甚至对我都熟悉。
小助君
2022/01/15
8530
入门 Serverless:如何实现 Hello World?
近年来,IT 技术的更新迭代速度非常快,每个时间点都有典型的代表名词以及概念,就目前而言,人工智能领域中的机器学习、深度学习、强化学习等名词和概念就非常热,同时区块链、物联网等技术发展也是异常火热。在云计算领域,有这样一个技术被众多云厂商认为是“风口项目”,甚至可以颠覆现有云计算中的某些格局,为此包括 AWS、谷歌以及腾讯云、阿里云等在内的云厂商,都为此投入了重大人力以及精力进行相关产品建设,它就是 Serverless 技术。 自 2006 年 8 月 9 日,Google 首席执行官埃里克·施密特(E
腾讯云serverless团队
2020/04/09
2.1K1
如何用 Serverless 搭建 Mock Server
前言 什么是 Serverless 无服务器 Serverless 是一种云原生开发模型,可使开发人员专注构建和运行应用,而无需管理服务器。云函数(Serverless Cloud Function,SCF)则是腾讯云提供的无服务器执行环境,可以在无需购买和管理服务器的情况下运行代码。 什么是 Mock Server 现在的业务系统很少有孤立存在的,它们或多或少需要使用或依赖其他服务,这给我们的联调和测试造成了麻烦。为了应对这种情况,我们常会搭建一个临时的 server,模拟那些服务,提供模拟数据进行联调和
腾讯云serverless团队
2022/01/20
9770
Serverless + Egg.js 后台管理系统实战
作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它的高扩展性和丰富的插件,极大的提高了开发效率。开发者只需要关注业务就好,比如要使用 redis,引入 egg-redis 插件,然后简单配置就可以了。正因为如此,第一次接触它,我便喜欢上了它,之后也用它开发过不少应用。
网站运维工程师
2020/03/11
5K0
如何精确监控DB响应延时
作者:任坤,现居珠海,先后担任专职 Oracle 和 MySQL DBA,现在主要负责 MySQL、MongoDB 和 Redis 维护工作
老叶茶馆
2021/08/26
8550
【DB宝49】Oracle如何设置DB、监听和EM开机启动
Oracle提供了随操作系统启动而启动的功能,在Windows和Linux中,分别有不同的设置方法。
AiDBA宝典
2021/04/25
8460
【DB宝49】Oracle如何设置DB、监听和EM开机启动
Oracle提供了随操作系统启动而启动的功能,在Windows和Linux中,分别有不同的设置方法。
AiDBA宝典
2021/04/30
1.6K0
Serverless 如何帮助前端实现全栈?
从 Web 1.0 开始,我们对前端领域的探索从未停止。Nodejs 的出现更是彻底而深刻的改变了JavaScript 及前端开发工具的应用场景,那么身处大前端时代的我们,该如何真正由前端转向全栈呢? 2019年10月20日,JSConf大会上,腾讯云中间件总经理 Yunong Xiao 发表了关于《Serverless Is Your BFF》主题演讲,从前端发展演进、前端到全栈的路径和问题以及如何利用Severless 实现前端到全栈的发展等维度展开分享,并现场配合Live Code演示,深度剖析
腾讯云serverless团队
2019/10/22
1K0
Serverless 如何帮助前端实现全栈?
微服务和 Serverless 如何强强联合?
导语 | 微服务与 Serverless 被不少开发者称为“天作之合”,在当前的微服务体系中,Serverless 的定位是什么?Serverless 在微服务分布式应用中又是如何落地的?本文由腾讯云微服务产品中心技术总监 韩欣 在 Techo TVP 开发者峰会 ServerlessDays China 2021上的演讲《腾讯云微服务在 Serverless 的探索实践》整理而成,向大家分享团队中 Serverless 技术在实际开发过程与用户场景中的落地与思考。 点击可观看精彩演讲视频 一、
腾讯云开发者
2021/07/15
2.6K0
如何使用 Serverless 做架构和项目管理——三年全栈经验总结
本文是从项目工程角度来讲解的,技术角度请参看另一个文章《真实项目代码教你四步扔了传统服务器,让你优雅使用 Serverless 做全栈开发》(https://zhuanlan.zhihu.com/p/493447018) 本文汇总了我的多个 Serverless 的全栈项目实际开发的经验,主要针对中小型项目。可以直接使用我的经验,或者根据实际情况再做调整。 第一步:决策 Serverless 项目管理的艺术体现在如何在限定条件下发挥优势、规避劣势,因此我们需要先确定中小项目里 Serverless 的优劣
腾讯云serverless团队
2022/05/13
5850
如何使用 Serverless 做架构和项目管理——三年全栈经验总结
Serverless安全研究 — Serverless概述
在“云”的概念还没有产生之前,开发者购买物理机,并在其上部署应用程序,企业将购买的机器放置数据中心,其网络、安全配置均需要专业的技术人员管理,在这种高成本运营模式下,虚拟化技术应运而生。
绿盟科技研究通讯
2020/09/08
2.1K0
如何建设私有云原生 Serverless 平台
随着云计算的普及,越来越多的企业开始将业务应用迁移到云上。然而,如何构建一套完整的云原生 Serverless 平台,依然是一个需要考虑的问题。
Rainbond开源
2023/03/13
5.9K0
腾讯云 Serverless 云函数并发管理能力解读
近期,腾讯云 Serverless 云函数发布了并发管理能力升级版,提供了 3 个维度的并发额度管理的功能。该功能究竟提供了哪些能力,有哪些使用场景?本文将为您全方位解读并发管理功能,并对多种使用场景提供配置建议。 背景介绍 原先,创建一个函数,默认具有300的并发数量上限。针对小的低频业务,300 的并发值足够使用。但是遇到业务量上涨、支撑大型运营活动等大并发的情况,开发者就需要通过提工单联系平台方,申请提升函数并发额度。这样可能导致: 每遇到一次大并发,就需要联系一次平台方来提升配额,时效性弱。 申请
腾讯云serverless团队
2020/12/31
1.7K0
Laravel + Serverless Framework 快速创建 CMS 内容管理系统
今天,为大家带来一篇 Laravel + Serverless Framework 的综合实战,里面信息量有点多,大家仔细看哦~ 首先,我来介绍下主要的本地环境吧: Git:不多说,只要会敲代码就应该知道 Node.js:由于腾讯云 Serverless Framework 主编程语言是 Node.js,所以本地也请大家搞一个吧 NPM:NPM 是随同 Node.js 一起安装的包管理工具,能解决 Node.js 代码部署上的很多问题,我们的 sls 也是通过这玩意下载的 PHP:不多说,最好的语言 Co
腾讯云serverless团队
2020/03/24
2.7K0

相似问题

如何使用Serverless框架?

72.4K

serverless函数如何支持跨域?

11.4K

Serverless计算如何影响云运营团队?

5801

如何快速查看所有serverless问题?

1205

Serverless/云函数如何调用RPC服务?

1548
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档