使用行和内部列制作具有文本和图像的卡片

Question

我的卡片的文本部分有多个文本小部件，我必须将它们放在 column 下。我想将整个部分添加到 row 小部件下，以便我可以将图像部分添加到此列小部件的右侧。

这是我所做的：

class ContactMe extends StatelessWidget {
  static const String route = '/contact_me';
  const ContactMe({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Column(
        children: [
          CommonNavBar(height: height),
          Expanded(
            child: FutureBuilder(
                future: contactMe(),
                builder: (context, snapshot) {
                  if (snapshot.data == null)
                    return Center(child: CircularProgressIndicator());
                  else {
                    var data = snapshot.data as List<String>;
                    return LayoutBuilder(builder: (context, constraints) {
                      if (constraints.maxWidth < 1000) {
                        return Center();
                      } else {
                          return Row(  //this is parent row
                            children: [
                              Container(
                                child: Column( //the column that contains multiple other widgets
                                  children: [
                                    text('Reach Out to me!', 25,
                                        Theme.of(context).primaryColorLight),
                                    Text('anything'),
                                  ],
                                ),
                              ),
                              Image.asset('assets/contact_me/' + data[2], scale: 2), //the image widget
                            ],
                          );
                      }
                    });
                  }
                }),
          ),
        ],
      ),
    );
  }
}

但不是卡片，布局如下所示：

如图所示，由于某种原因，图像与列小部件不一致。我在这里犯了什么错误？

Answer 1

我认为你的问题与不同的路线有关。行的默认 crossAxisAlignment 是 CrossAxisAlignment.center，因此您的图像和列位于行的垂直中间。列的默认 mainAxisAlignment 是 MainAxisAlignment.start，因此列中的内容位于其顶部。

我可以看到两种可能的方式将您的内容放在同一水平线上：

将列的 mainAxisAlignment 设置为 MainAxisAlignment.center
将行的 crossAxisAlignment 设置为 CrossAxisAlignment.start

将来，您可能会发现此资源在处理不同布局时很有帮助：https://docs.flutter.dev/development/ui/layout

Answer 2

作为答案的延续，我通过对两个小部件使用 mainAxisAlignment 和 crossAxisAlignment 来修复它。

return Row(
  crossAxisAlignment: CrossAxisAlignment.start, //takes the row to the top
  mainAxisAlignment: MainAxisAlignment.spaceAround, //Used this for spacing between the children
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,  //used for aligning the children vertically
      children: [
        text('Reach Out to me!', 25,
          Theme.of(context).primaryColorLight),
        text(
          'DISCUSS A PROJECT OR JUST WANT TO SAY HI? MY INBOX IS OPEN FOR ALL.',
          18,
          Theme.of(context)
            .primaryColorLight
            .withOpacity(0.3)),
       ],
    ),
    Image.asset('assets/contact_me/' + data[2], scale: 2),
  ],
);

使用行和内部列制作具有文本和图像的卡片

Making a card having text and image using Row and an inner Column

dart

flutter

flutter-card