无法使用对齐小部件和对齐属性来对齐行的子项

Question

我在 Flutter 中使用起来有些困难Alignments。我正在尝试制作一张一次性卡片。我无法将图像居中并将图标放置在右上角。

---

小部件说明

组成Card并且Columns每个Column都有一个Row

Iconx是第一个图标的第一个子元素Row

我用 Widget 包裹了 Icon Align，但它不会在右侧移动：

Row(children: [
     Align( 
     alignment: Alignment.topRight, 
     child: Icon(Icons.cancel),)
   ]
)

对于猫头鹰图像，我将其包装在 a 中Container，并使用该alignment属性将其放置在 中Center：

Row(children: [
   Container(
      width: 100,
      height: 150,
      alignment: Alignment.center,
      child: Image(
         alignment: Alignment.center,
         image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
            )
       ),
  ]),

似乎无论我在布局上尝试什么，它都不会移动其中的对象Card

---

这是Card小部件：

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Card(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(children: [
          Align(
            alignment: Alignment.topRight,
            child: Icon(Icons.cancel) ,
          )
         ]
        ),
        SizedBox(
          height: 8,
        ),
        Row(children: [
          Container(
              width: 100,
              height: 150,
              alignment: Alignment.center,
              child: Image(
                alignment: Alignment.center,
                image: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              ))
        ]),
      ],
    ));
  }
}

无论我尝试什么，我都无法将它们正确放置，我是否完全错过了对齐小部件和对齐属性的概念？

Answer 1

您所需要做的就是将 MainAxisAlignment 设置为行的中心。请运行下面的代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: CustomCard(),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.topRight,
          child: Icon(Icons.cancel),
        ),
        SizedBox(
          height: 8,
        ),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Container(
              width: 100,
              height: 150,
              child: Image(
                image: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              ))
        ]),
      ],
    ));
  }
}