底部溢出 260 像素的 RenderFlex。 - ListTile

Question

我正在尝试在 ListTile 尾部添加列，但它给我渲染流程错误，而且它与它的标题不对齐。

这是我的代码

 SizedBox(
                  height: MediaQuery.of(context).size.height * 0.55,
                  child: ListTile(
                    title: Padding(
                      padding: const EdgeInsets.only(left: 5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Date"),
                          SizedBox20(),
                          Text("Token no"),
                          SizedBox20(),
                          Text("Token Issuance Date"),
                          SizedBox20(),
                          Text("Token Issuance Time"),
                          SizedBox20(),
                          Text("Calling Place"),
                          SizedBox20(),
                          Text("Total Fee"),
                          SizedBox20(),
                          Text("Advance"),
                          SizedBox20(),
                          Text("Remaining"),
                          SizedBox20(),
                          Text("Status"),
                          SizedBox20(),
                        ],
                      ),
                    ),
                    trailing: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text("5/11/2021"),
                        SizedBox20(),
                        Text("36"),
                        SizedBox20(),
                        Text("2/11/2021"),
                        SizedBox20(),
                        Text("12:15:00 PM"),
                        SizedBox20(),
                        Text("Desk 07"),
                        SizedBox20(),
                        Text("PKR. 1,000/-"),
                        SizedBox20(),
                        Text("PKR. 200/-"),
                        SizedBox20(),
                        Text("PKR. 800/-"),
                        SizedBox40(),
                        Text("Unattended"),
                        // SizedBox20(),
                      ],
                    ),
                  ),
                ),

我想要 title Date 和 trailing 5/11/2021 应该对齐一行，所有人都一样。

应该是

这是我的代码输出

请帮忙解决一下。

Answer 1

试试下面的代码希望对你有帮助。使用 Column 和 Rows Widget 而不是 ListTile

SingleChildScrollView(
  padding: EdgeInsets.all(10),
  child: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Date"),
          Text("5/11/2021"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token no"),
         Text("36"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token Issuance Date"),
          Text("2/11/2021"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Token Issuance Time"),
          Text("12:15:00 PM"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Calling Place"),
          Text("Desk 07"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Total Fee"),
         Text("PKR. 1,000/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Advance"),
          Text("PKR. 200/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Remaining"),
          Text("PKR. 800/-"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Status"),
          Text("Unattended"),
        ],
      ),
      SizedBox(
        height: 10,
      ),
    ],
  ),
);

您的结果屏幕 ->

底部溢出 260 像素的 RenderFlex。 - ListTile

A RenderFlex overflowed by 260 pixels on the bottom. - ListTile

trailing

flutter

listtile