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

Question

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

---

小部件说明

Card 由Columns 组成，每个Column 都有一个Row

x 图标是第一个 Row 的第一个 child

我用 Align 小部件包裹了图标，但它不会向右移动:

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

对于猫头鹰图像，我将其包裹在 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'),
              ))
        ]),
      ],
    ));
  }
}