Flutter布局，徽标位于屏幕上部，按钮位于下部

j13ufse2 于 2023-05-23 发布在 Flutter

关注(0)|答案(2)|浏览(147)

我对Flutter完全陌生。我试图在顶部我会有一个标志，并在底部将有3个按钮的布局。基本上，按钮应该是屏幕宽度的80%，并且一个堆叠在另一个之上，其间有一些间距，并且徽标应该位于按钮上方的可用空间的中心，最大宽度为屏幕的一半，最大高度为可用空间的一半。我找不到任何方法来使它工作。

下面是我的HomePage类的build函数：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      left: false,
      right: false,
      child: Stack(
        children: [
          Center(
            child: SvgPicture.asset(
              width: MediaQuery.of(context).size.width / 2,
              _logoImageName,
            ),
          ),
          Positioned(
            bottom: 20,
            child: Container(
              width: MediaQuery.of(context).size.width * 0.8,
              child: Column(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: onSettingsPressed,
                      child: const Text('Go to screen 1'),
                    ),
                  ),
                  const SizedBox(height: 20),
                  Expanded(
                    child: ElevatedButton(
                      onPressed: onSettingsPressed,
                      child: const Text('Go to screen 2'),
                    ),
                  ),
                  const SizedBox(height: 20),
                  Expanded(
                    child: ElevatedButton(
                      onPressed: onSettingsPressed,
                      child: const Text('Go to screen 3'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

我经常遇到不同的错误，比如：

Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.

或

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

老实说，我不知道从哪里开始调试这个，我试着问ChatGPT，但它只是不停地告诉我在随机的地方添加Expanded小部件，这并没有改变任何东西，我也试着用谷歌搜索这个，但也没有帮助。
一般来说，我是一个经验丰富的iOS软件工程师，只是新的Flutter。

flutter

来源：https://stackoverflow.com/questions/76295133/flutter-layout-with-logo-in-the-upper-part-of-the-screen-and-buttons-in-the-lowe

2条答案

按热度按时间

4smxwvx51#

代码：

Scaffold(
  body: SafeArea(
    left: false,
    right: false,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Spacer(),
        Center(
          child: SizedBox(
            width: MediaQuery.of(context).size.width * .8,
            child: const Icon(
              Icons.person,
              color: Colors.blue,
            ),
          ),
        ),
        const Spacer(),
        ElevatedButton(
          onPressed: () {},
          child: const Text(
            'Go to screen 1',
            style: TextStyle(color: Colors.white),
          ),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {},
          child: const Text(
            'Go to screen 2',
            style: TextStyle(color: Colors.white),
          ),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {},
          child: const Text(
            'Go to screen 3',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ],
    ),
  ),
);

截图

赞(0）回复(0）举报 2023-05-23

dfddblmv2#

使用@pskink建议的解决方案：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      left: false,
      right: false,
      child: Center(
        child: Column(
          children: [
            Expanded(
              child: FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor: 0.5,
                alignment: FractionalOffset.center,
                child: SvgPicture.asset(_logoImageName),
              ),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.65,
              height: 48,
              child: ElevatedButton(
                onPressed: onSettingsPressed,
                child: const Text('Go to screen 1'),
              ),
            ),
            const SizedBox(height: 20),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.65,
              height: 48,
              child: ElevatedButton(
                onPressed: onSettingsPressed,
                child: const Text('Go to screen 2'),
              ),
            ),
            const SizedBox(height: 20),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.65,
              height: 48,
              child: ElevatedButton(
                onPressed: onSettingsPressed,
                child: const Text('Go to screen 3'),
              ),
            ),
            const SizedBox(height: 48),
          ],
        ),
      ),
    ),
  );
}

也谢谢@dinesh-nagarajan的回答！

赞(0）回复(0）举报 2023-05-23

我来回答

Flutter布局，徽标位于屏幕上部，按钮位于下部

2条答案

相关问题

热门标签

最新问答