时间戳

首页 > 解决方案 > 变换粉碎了颤振上方的容器

flutter - 变换粉碎了颤振上方的容器

问题描述

我有一个包含一列的代码，在列中有 3 个小部件，一个高度为 200，宽度为 200 的小部件容器，红色，第二个小部件包含一个带有子容器的变换比例，其中包含我要缩放的图像，并且小部件 3 包含与第一个小部件相同的内容，每次我缩放图像时，第二个容器发生的事情总是超过第一个容器，但如果在 css 中，则不会发生在 continaer 到 3 的情况下我肯定会用zindex，有没有什么flutter zindex

这是代码

SingleChildScrollView(
  physics: AlwaysScrollableScrollPhysics(),
  child: Column(
    children: <Widget>[
      Container(
        height: 300,
        color: Colors.red,
      ),
      Container(
        // height: 397,
        child: Transform.scale(
          scale: 2.0,
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Image(
              image: NetworkImage(
                  "https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
      Container(
        height: 300,
        color: Colors.red,
      ),
    ],
  )));

以及该代码的结果 在此处输入图像描述

标签： flutterflutter-layout

解决方案

使用Stack小部件，

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          _buildHeader(),
          for (final i in List.generate(20, (i) => i))
            ListTile(title: Text("Tile $i")),
        ],
      ),
    );
  }

  _buildHeader() {
    double height = 250;
    return SizedBox(
      height: height,
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                color: Colors.red,
                height: height * 2 / 3,
              ),
              Container(
                color: Colors.grey[200],
                height: height / 3,
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Image(
              image: NetworkImage(
                  "https://s3-ap-southeast-1.amazonaws.com//kriyapeople/8fa208d6-1486-4028-bd23-243581b4d3a7"),
              height: height * 2/3,
              width: height * 2/3,
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}

推荐阅读