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

由于上级无法填补剩余空间，因此请更改商品查看代码：

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

将列小部件包裹在行内展开，如下所示，

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

颤振行的主轴对齐空间之间的行不通

2 个答案: