1

我卡片的文本部分有多个文本小部件，我必须将它们放在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
                            ],
                          );
                      }
                    });
                  }
                }),
          ),
        ],
      ),
    );
  }
}

但不是卡片，布局看起来像这样：

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

4

2 回答 2

2

继续@OlegBezr 的回答，我通过使用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),
  ],
);
于 2021-12-07T04:00:15.400 回答
1

我认为您的问题与不同的对齐方式有关。Row的默认crossAxisAlignment值为CrossAxisAlignment.center，因此您的图像和列位于行的垂直中间。Column的默认mainAxisAlignment值为MainAxisAlignment.start，因此列中的内容位于其顶部。

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

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

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

于 2021-12-07T01:45:13.343 回答