行中居中文字

Question

备注：我只是通过使用ListTile而不是我的实现解决了我的问题（我是Flutter的新手，并且不知道存在类似的东西）。但是，看看您如何解决该问题仍然会很好。

---

我在将Text放在Row的中心时遇到问题。这是我的IconRow小部件的代码：

import 'package:flutter/material.dart';

class IconRow extends StatelessWidget {
  Icon _icon;
  Widget _widget;

  IconRow(Icon _icon, Widget _widget) {
    this._icon = _icon;
    this._widget = _widget;
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
        decoration: new BoxDecoration(color: Colors.red),
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        this._icon,
        new Expanded(
            child: new Padding(
                padding: EdgeInsets.only(left: 10.0), child: this._widget))
      ]
    ));
  }
}

我在填充和其他小部件中这样使用它：

new IconRow(
    new Icon(Icons.date_range),
    new Text(
        this._preparationStep.date,
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
));

结果如下图所示。文本在顶部对齐，如下图所示。第二个文本看起来更好，因为它是多行文本。该行被涂成红色以显示该行的间距。

我已经尝试将crossAxisAlignment: CrossAxisAlignment.start更改为CrossAxisAlignment.center，以根据需要将文本居中，但也将图像移动到行的中心，如下图所示。

在Text仍在顶部对齐的情况下，如何使Icon居中？

Answer 1

您可以将Icon包裹到Align

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Align(
     alignment: Alignment.topCenter,
     child: Icon(Icons.ac_unit),
    ),
    Text("Foo")
  ],
)