在正文中添加多行或多列答案

【问题标题】：Adding multiple rows or column in body在正文中添加多行或多列
【发布时间】：2021-05-19 14:22:23
【问题描述】：

您好，当我在正文中添加另一个 Expanded() 代码时，我试图弄清楚为什么我的汉堡包会错位。

我尝试按照这个 url 开发一个汉堡菜单并同时响应所有平台。 Flutter Blog

以下是我尝试在Expanded() 下方添加Row() 的代码

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      key: _scaffoldKey,
      drawer: AppDrawer(),
      body: Row(
        children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(16),
                child: IconButton(
                    icon: Icon(Icons.menu, size: 30),
                    onPressed: () {
                      _scaffoldKey.currentState.openDrawer();
                    }),
              ),
            ],
          ),
          Expanded(
            child: Container(
              width: width,
              child: Column(
                children: [
                  Expanded(
                    child: Lottie.network(
                        'https://assets2.lottiefiles.com/datafiles/6WfDdm3ooQTEs1L/data.json'),
                  ),
                  Expanded(
                    child: Column(
                      children: [
                        Flexible(
                          child: Text(
                            "Multivariate Testing",
                            style: GoogleFonts.montserrat(
                              fontSize: 50,
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Flexible(
                          child: Text(
                            'Run experiments to make key flows more effective.',
                            style: GoogleFonts.montserrat(
                              fontSize: 25,
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 35,
                        ),
                        // ignore: deprecated_member_use
                        TextButton(
                          onPressed: () {},
                          child: Text(
                            'Create Experiment',
                            style: GoogleFonts.montserrat(
                              fontSize: 20,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

以及我从移动视图看到的输出。感谢任何帮助。截图太大见谅！

【问题讨论】：

标签： flutter user-interface dart

【解决方案1】：

这是因为Row 的默认功能。

所以将你的第一个孩子为你的顶级Row 改成这个，

Scaffold(
  key: _scaffoldKey,
  drawer: AppDrawer(),
  body: Row(
    children: [
      Align(
        alignment: Alignment.topCenter,
        child: Padding(
            padding: const EdgeInsets.all(16),
            child: IconButton(
                icon: Icon(Icons.menu, size: 30),
                onPressed: () {
                  _scaffoldKey.currentState.openDrawer();
                })),
      ),
      Expanded( ...... rest of your code

在这里，我们将Align 小部件与alignment: Alignment.topCenter 结合使用。

Align 小部件占用父级中的整个可用空间，然后根据 alignment 属性将其对齐而不是其中的子级。

所以，说Alignment.topCenter 将把它放在垂直的顶部和水平的中间。

使用AppBar 将不必要地使您的情况复杂化，因为现在AppBar 将占用顶部空间，但在您的情况下，您希望您的Lottie 视图在顶部可见，所以它会重叠。

【讨论】：

【解决方案2】：

因为 Expanded 会填满整个空间，这就是为什么您的汉堡会错位的原因。为什么不尝试使用 appbar 来制作汉堡包？

【讨论】：

嗨，我会看看 appbar，但对于另一部分 Expanded() 我尝试将其更改为 Row() 它对我不起作用
您不需要将 Expanded() 更改为 Row()。就像@nisanth-reddy 在他的回答中建议的那样，将第一个孩子对齐到顶部。