小编yay*_*aga的帖子

ListTile:在尾随小部件中包装文本

我试图使用 ListTile 在左侧显示一个小标题,然后在尾随小部件中显示一个较长的文本。如果没有足够的水平空间,我的想法是让尾随文本分成多行。

我还尝试使用以下代码创建自己的磁贴:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12),
        child: Text(
          "Campus",
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      Text(
        "20h course - New students -",
        style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w400,
        ),
      ),
    ],
  ),
),
Run Code Online (Sandbox Code Playgroud)

在 Pixel 2 XL 模拟器中使用此代码,因为有足够的空间,所有内容都按预期在同一行中:

在此处输入图片说明

但是当我在 Nexus One 模拟器中尝试它时,由于它的大小,这里是输出:

在此处输入图片说明

为了允许文本分成多行,我将右侧的文本包装到一个灵活的小部件中:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12), …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-layout

0
推荐指数
1
解决办法
2681
查看次数

标签 统计

flutter ×1

flutter-layout ×1