flutter - 如何自定义 Stack 高度 Flutter

Question

我是新来的

只是想知道如何将这 3 个图像放入一个颤动的堆栈中，前 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,
              ),
            ),
          ],
        ),
      ],
    )));
  }
}

标签： flutter

Answer 1

您可以将堆栈溢出设置为visible：

解决方案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,
                ),
              ),
            ],
          ),
        ],
      ))),
    );
  }
}

您的 Stack 块没有足够大的高度来容纳最后三个图像。因此可以将堆栈包装在容器中，并将其高度设置为 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,
                  ),
                ),
              ],
            ),
          ),
        ],
      ))),
    );
  }
}

输出：