顫動行mainAxisAlignment spaceBetween不工作

Question

這是我構建項目視圖容器的代碼：

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[

                  /// title
                  _buildTitle(t),

                  ...
                ],
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

和_buildTitle代碼，這里是問題發生的地方：

Widget _buildTitle(InboxItem item) {
return Container(
  padding: EdgeInsets.only(bottom: 2.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[

      /// sender
      Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),

      /// time
      Text(item.receiveTime == null ? "" : item.receiveTime,
          style: dkGreySmallText),

    ],
  ),
);
}

運行結果，時間緊跟在用戶名后面而不是右邊。

這是屏幕截圖的一部分：

哪里有問題？

Answer 1

因為上級沒有填滿剩余空間，更改item查看代碼：

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Expanded(
                child:Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    /// title
                    _buildTitle(t),

                    ...
                  ],
                ) ,
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

Answer 2

如下將 Column Widget 包裹在 Expanded inside Row 中，

Row(
    children: [
      Image.asset("assets/..."),
      Expanded(
        child: Column(children: [
          Row(
            children: [
              Text("admin"),
              Text("2020-12-14"),
            ],
          ),
        ]),
      ),
    ],
  )
                  

Answer 3

看到這張圖片

將行包裹在 SizedBox 小部件中並設置所需的寬度。 在列小部件內，行沒有獲得足夠的寬度來應用 mainAxisAlignment：MAinAxisAlignment.spaceBetween。

       Row(
          children: [
            // avatar image
            const CircleAvatar(
              backgroundColor: Colors.yellow,
              radius: 45,
            ),
            const SizedBox(width: 10),
            // for side details
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // for first row using spaceBetween
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.6,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      Text('admin'),
                      Text('20-10-2020'),
                    ],
                  ),
                ),
                // other details
                const SizedBox(height: 10),
                const Text('123'),
                const SizedBox(height: 10),
                const Text('12312'),
              ],
            ),
          ],
        ),

Answer 4

你不需要這三行；

crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,

只需使用Spacer()將下一個項目推到空白空間的末尾。 這是您的最終代碼；

Widget _buildTitle(InboxItem item) {
  return Container(
    padding: EdgeInsets.only(bottom: 2.0),
    child: Row(
      children: <Widget>[
        /// sender
        Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),
        Spacer(),

        /// time
        Text(item.receiveTime == null ? "" : item.receiveTime,
            style: dkGreySmallText),
      ],
    ),
  );
}