Flutter：我可以在一行内使用不同类型的crossAxisAlignment吗？

vvppvyoh 于 2022-12-19 发布在 Flutter

关注(0)|答案(4)|浏览(149)

我有一个具有动态高度项的ListView。每个项都是一个包含3个元素的Row：文本、列、列。ListView的外观如下所示：

下面是我的物品小部件的代码：

class ItemWidget extends StatelessWidget {
  final ItemViewModel model;

  const ItemWidget({Key key, @required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(width: 16),
        Text(
          model.typeLabel,
        ),
        SizedBox(width: 8),
        Expanded(
          flex: 6,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              SizedBox(height: 4),
              Text(
                'Volume:',
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 2),
              Text(
                model.volume,
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 4),
              Text(
                'Filled:',
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 2),
              Text(
                model.filled,
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 4)
            ],
          ),
        ),
        SizedBox(width: 16),
        Expanded(
            flex: 6,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SizedBox(height: 4),
                Text(
                  'Price:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.price,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Total:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.total,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Fee:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.fee,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
              ],
            )),
        SizedBox(width: 16),
      ],
    );
  }
}

我希望我的Column小部件总是顶部对齐，就像行的crossAxisAlignment为CrossAxisAlignment.start时一样。同时，文本应该居中，就像行的crossAxisAlignment为CrossAxisAlignment.center时一样。下面是我想要的：

如何实现这一目标？

谢谢你的帮助。

flutter

来源：https://stackoverflow.com/questions/65309287/flutter-can-i-use-different-types-of-crossaxisalignment-inside-one-row

4条答案

按热度按时间

1aaf6o9v1#

我的理解是否正确：您有3个元素的行，并且希望第一个元素居中，另外两个元素靠上对齐？
我认为您的主要误解是，列不会自动拉伸到整个高度，因此它们的内容可能是顶部对齐的，但它们本身在行中是居中对齐的。
This是关于这个主题的一个非常好的指南，理解它非常重要。
用Align()小部件 Package 中间元素可能可以解决您的直接问题。

赞(0）回复(0）举报 2022-12-19

vmdwslir2#

答案是：Row小部件不能为其子级使用不同的crossAxisAlignment类型。
但是我为我的布局找到了另一个解决方案，在根目录下使用Stack widget。

class ItemWidget extends StatelessWidget {
  final ItemViewModel model;

  const ItemWidget({Key key, @required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Positioned.fill(
        child: Container(
          padding: EdgeInsets.only(left: 16),
          alignment: Alignment.centerLeft,
          child: Text(model.typeLabel),
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(width: 24),
          Expanded(
            flex: 6,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SizedBox(height: 4),
                Text(
                  'Volume:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.volume,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Filled:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.filled,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4)
              ],
            ),
          ),
          SizedBox(width: 16),
          Expanded(
              flex: 6,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  SizedBox(height: 4),
                  Text(
                    'Price:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.price,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                  Text(
                    'Total:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.total,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                  Text(
                    'Fee:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.fee,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                ],
              )),
          SizedBox(width: 16),
        ],
      )
    ]);
  }
}

结果是：