flutter - 一个 RenderFlex 在底部溢出 260 像素。- 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,
      ),
    ],
  ),
);

您的结果屏幕 ->