在 Flutter 中的列内堆叠

Question

我可以在 Column 小部件中使用 Stack 吗？

Container(child: Column(children: 
[
Text('This is going to hit'),
Stack(children: [Image.asset('picture.png'),]),
Text(' lorem ipsum dolor si amet consecture')
])
]))

SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              children: [
                               Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                                                    ]),
                      child: Column(
                        children: [
                          Text(
                              'heyyyyyy.'),
                          Container(
                            height: 300,
                            width: double.infinity,
                            child: Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Positioned(
                                  top: 4,
                                  left: -25,
                                  right: -25,
                                  child: Image.asset('assets/be11.png'),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            height: SizeConfig.blockSizeVertical * 5,
                          ),
                          Text(Data.loremIpsum),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),

这是我的代码。现在图像适合白色容器区域。我想把它从容器里拿出来。

图像边框不是必需的。当我增加图像的 Positioned 小部件的值时，它不会弹出下面的容器边框。

Answer 1

这是一个例子，你可以这样做，这是为了让你有一个想法，然后你可以根据需要进行调整：

Scaffold(
        body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(15.0),
          child: Container(
            width: 200,
            height: 280,
            child: Stack(
              children: [
                Center(
                  child: Container(
                    width: 180,
                    height: 280,
                    color: Colors.green,
                  ),
                ),
                Positioned(
                    top: 5,
                    left: 15,
                    child: SizedBox(
                      width: 180,
                      child: Text(
                          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ', style: TextStyle(fontSize: 10),),
                    )),

                Positioned(
                  top: 45,
                  child: Container(

                    width: 200,
                    height: 100,
                    decoration: BoxDecoration(
                      color: Colors.grey
                    ),

                  ),
                ),

                Positioned(
                    top: 150,
                    left: 15,
                    child: SizedBox(
                      width: 180,
                      child: Text(
                        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ', style: TextStyle(fontSize: 10),),
                    )),

              ],
            ),
          ),
        )
      ],
    ))

Answer 2

   ///No need to add stack widget you can make this UI like this way hope this will work for you thankyou
    
         import 'package:flutter/material.dart';
            
            class Task extends StatefulWidget {
              const Task({Key? key}) : super(key: key);
            
              @override
              _TaskState createState() => _TaskState();
            }
            
            class _TaskState extends State<Task> {
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                    backgroundColor: Colors.grey,
                    body: Padding(
                      padding: const EdgeInsets.only(top: 50.0, left: 10, right: 10),
                      child: Container(
                        color: Colors.blue[100],
                        padding: const EdgeInsets.only(top: 30.0, left: 10, right: 10),
                        child: Column(
                          children: [
                            Row(
                              children: [
                                Text(
                                  'News',
                                  style: TextStyle(
                                    color: Colors.blue,
                                  ),
                                ),
                                SizedBox(
                                  width: 5,
                                ),
                                CircleAvatar(
                                    radius: 8,
                                    child: Icon(
                                      Icons.arrow_forward_outlined,
                                      color: Colors.white,
                                      size: 10,
                                    ))
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Card(
                              elevation: 5,
                              child: Container(
                                height: 700,
                                child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Text(
                                          'The marian uprising missionaries dedicated community is coming into existence',
                                          style: TextStyle(
                                              color: Colors.blue,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 18),
                                        ),
                                      ),
                                      Card(
                                          shape: OutlineInputBorder(
                                              borderRadius: BorderRadius.circular(20),
                                              borderSide: BorderSide(color: Colors.white)),
                                          elevation: 10,
                                          child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Container(
                                              height: 200,
                                              decoration: BoxDecoration(
                                                  shape: BoxShape.rectangle,
                                                  borderRadius: BorderRadius.circular(20),
                                                  image: DecorationImage(
                                                      image: NetworkImage(
                                                        'https://media.istockphoto.com/photos/colorful-wavy-object-picture-id1198272365?s=612x612',
                                                      ),
                                                      fit: BoxFit.cover)),
                                            ),
                                          )),
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Text(
                                          "Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum",
                                          style: TextStyle(
                                            color: Colors.blue,
                                          ),
                                        ),
                                      )
                                    ]),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ));
              }
            }