flutter - 如何自定义 Stack 高度 Flutter

Question

我是新来的

只是想知道如何将这 3 张图片放入 flutter 中，前 2 张适合行，但最后一个有点偏移堆栈的高度。

ps* 对不起，我的代码很垃圾，我才刚开始嘿嘿

import 'dart:ui';

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset(
          'assets/images/wp_logo.png',
          height: 250,
        ),
        Stack(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  'assets/images/text_bg.png',
                  height: 150,
                ),
                Image.asset(
                  'assets/images/text_bg.png',
                  height: 150,
                ),
              ],
            ),
            Positioned(
              top: 125,
              left: 125,
              child: Image.asset(
                'assets/images/text_bg.png',
                height: 150,
              ),
            ),
          ],
        ),
      ],
    )));
  }
}

Answer 1

您可以将堆栈溢出设置为可见:

解决方案一:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/wp_logo.png',
            height: 250,
          ),
          Stack(
            // Set overflow to visible like shown below
            overflow: Overflow.visible,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                  Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                ],
              ),
              Positioned(
                top: 125,
                left: 145,
                child: Image.asset(
                  'assets/text_bg.png',
                  height: 150,
                ),
              ),
            ],
          ),
        ],
      ))),
    );
  }
}

您的堆栈 block 的高度不足以容纳最后三张图像。因此可以将 Stack 包裹在 Container 中，并给它一个 300 或更高的高度，因为图像高度为 150，并且有两行使它成为 300。

这是解决方案 2:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/wp_logo.png',
            height: 250,
          ),
          Container(
            height: 350,
            child: Stack(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/text_bg.png',
                      height: 150,
                    ),
                    Image.asset(
                      'assets/text_bg.png',
                      height: 150,
                    ),
                  ],
                ),
                Positioned(
                  top: 125,
                  left: 145,
                  child: Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                ),
              ],
            ),
          ),
        ],
      ))),
    );
  }
}

输出: