尝试在容器上定位图像时遇到问题

Question

我只是不知道我在这里做错了什么。这个想法是将网络图像堆叠在 AppBar 正下方的容器上。问题是图像似乎被裁剪或剪裁，或者一旦我尝试定位它，您可能想要放置它。相同的代码如下：

截图

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey
      ),
      home: MainScreen(),
    );
  }
}

main_screen.dart

import 'package:flutter/material.dart';
import './widgets/app_bar.dart';

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(63, 64, 65, 1),
      appBar: AppBar(
        leading: Icon(Icons.arrow_back_ios, color: Colors.orange),
        title: Text('Cheese Chicken Burger'),
        backgroundColor: Theme.of(context).primaryColorDark,
        elevation: 0,
      ),
      body: Column(
        children: [
          CustomAppBar(),    //The widget throwing the problem
        ],
      )
    );
  }
}

custom_app_bar.dart（这是所有堆叠发生的小部件）

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [
        Stack(
            children: [
              Container(
                height: 150,
                width: double.infinity,
                decoration: BoxDecoration(
                    color: Theme.of(context).primaryColorDark,
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(120),
                        bottomLeft: Radius.circular(120)
                    ),
                    boxShadow: const [
                      BoxShadow(
                          color: Colors.black,
                          spreadRadius: 40,
                          blurRadius: 60,
                          offset: Offset(5, 10)
                      )
                    ]
                ),
              ),
              Positioned(
                top: 100,
                right: 0,
                left: 0,
                child: SizedBox(
                  width: 150,
                  height: 150,
                  child: Image.network('https://www.foodrepublic.com/wp-content/uploads/2012/03/033_FR11785.jpg'),
                ),
              )
            ]
        ),
      ],
    );
  }
}

有人可以帮我解决这个问题吗？这就是我要找的东西

Answer 1

这里有一些关于你到底想要什么的问题的解决方案。 在您的堆栈内部，容器决定了您的堆栈高度。让我们来看看： 我将颜色设置为琥珀色。

你的身高是 150。如果我们把它改成 250，我们会看到这个。

这只是因为您的Positioned 小部件。您已将 top 值设置为 100。

如果您尝试将 top 值设置为 10 或 0。您会看到：

对于堆栈，您的第一个容器将指定您的堆栈高度。

我明白你的问题了吗？

[更新代码] 容器：

Container(
                  height: 150, // You can set your stack height with this line
                  width: double.infinity,
                  decoration: const BoxDecoration(
                      color: Colors.amber,
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(120),
                          bottomLeft: Radius.circular(120)),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            spreadRadius: 40,
                            blurRadius: 60,
                            offset: Offset(5, 10))
                      ]),
                ),

定位小部件：

Positioned(
                  top: 10, // You can change this line.
                  right: 0,
                  left: 0,
                  child: SizedBox(
                    width: 150,
                    height: 150,
                    child: Image.network('put your image url here'),
                  ),
                ),

Answer 2

你想变成这样吗？

[代码]

 Stack(
              children: [
                Container(
                  height: 300, // this will be your stack height
                ),
                Positioned(
                  child: Container(
                    height: 150,
                    width: double.infinity,
                    decoration: const BoxDecoration(
                        color: Colors.amber,
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(120),
                            bottomLeft: Radius.circular(120)),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black,
                              spreadRadius: 40,
                              blurRadius: 60,
                              offset: Offset(5, 10))
                        ]),
                  ),
                ),
                Positioned(
                  bottom: 60,
                  right: 0,
                  left: 0,
                  child: SizedBox(
                    width: 150,
                    height: 150,
                    child: Image.network(
                        'put your image urls'),
                  ),
                ),
              ],
            ),

第一个容器指定您的堆栈高度。你可以从那里改变它。