在列中 flutter 不同的对齐方式

Question

我有一个包含三行的列:

@override
Widget build(BuildContext context) {
return GestureDetector(
  onTap: () {
    print('card of course clicked');
  },
  child: Card(
    shape: RoundedRectangleBorder(borderRadius: 
    BorderRadius.circular(8.0)),
    child: Container(
      height: 144,
      child: Row(children: [
        Padding(
            padding: EdgeInsets.all(16.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                child: Image.network(_model._schoolThumb))),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 16),
            Align(
              alignment: Alignment.center,
              child: Text(_model._schoolName,
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w600,
                      fontSize: 18)),
            ),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                Icon(Icons.location_on, color: Colors.grey[700]),
                Container(width: 8),
                Text(_model._guides,
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.black,
                        fontWeight: FontWeight.w400)),
              ],
            ),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                Icon(Icons.attach_money, color: Colors.grey[700]),
                Container(width: 8),
                Text(_model._priceFrom,
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.black,
                        fontWeight: FontWeight.w400))
              ],
            )
           ],
         )
        ]),
        ),
       ),
     );
   }

结果，我开始对齐三行。

如何将第一个 Text() 居中对齐？为文本赋予属性并在 Expanded、Container、Stack 中包装没有帮助，或者我做错了。提前致谢!

编辑

附上整个build()方法

Answer 1

问题:

默认情况下，Column 的width 设置为最宽的child 小部件的width 列。

解决方案:

您需要使用 Expanded 或 Flexible 包装您的 Column。

如下所示。

Expanded(
  child: Column(
    children: <Widget>[
      ...
    ],
  ),
)

或

Flexible(
  child: Column(
    children: <Widget>[
      ...
    ],
  ),
)

然后需要使用 Align 或 Center 小部件将对齐方式设置为您的子小部件，在您的例子中是 Text 小部件。

如下所示:

Align(
  alignment: Alignment.center,
  child: Text(
    "Test",
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontSize: 18,
    ),
  ),
),

或

Center(
  child: Text(
    "Test",
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontSize: 18,
    ),
  ),
),