flutter - Flutter 文本在右侧溢出
问题描述
我有一张卡片,左侧有一个图标,右侧有两个文本,右侧的第一个文本溢出。锄头我可以让正确的文本在达到正确的限制时下降。
home: Scaffold(
body: SafeArea(
child: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Column(children: <Widget>[Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
)]),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
)],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('This is the second text'),
],
)
],),
],
),
),
),
),
),
);```
解决方案
因为Row
并Column
没有静态宽度,它会扩大到溢出屏幕。为防止这种情况,请将您的children
withExpanded
小部件包装起来。
Scaffold(
body: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
),
Text('This is the second text'),
],
),
),
],
),
),
),
),
我对您的代码进行了一些修改,因为有一些不必要的小部件。
推荐阅读
- php - 连接mssql服务器时出现08001
- java - 单元测试 Oracle 视图
- r - 使用 r 中的 Oauth2 在 403 代码后授权访问 Xero
- c++ - C++ Prime Plus 6th
- javascript - 提示用户输入姓名和年龄并相应打印结果的 JavaScript 程序
- python - 如何在不使用虚拟机的情况下在 Windows 上将 .py 文件转换为 .apk 文件
- reactjs - 我需要在 React 和 Redux 中创建无限滚动吗?
- codeigniter - 我正在制作一个关于我们的页面,我需要使用 codeigniter 在单击数据库时更新三个图像以实现任务愿景和 about_us
- arrays - MATLAB:如何生成每行和每列具有特定数量 1 的随机二进制矩阵?
- jquery - 计算格式为 12 小时(上午,下午)的员工的工作时间