Flutter Stack 定位和溢出

我目前正在研究颤振。我正在将堆栈用于堆栈 2 小部件。但我有一些问题。

这就是我想要做的。

This is what I am trying to do.

但我的小部件看起来像这样。

But my widgets look like this.

那是我的代码:

class UpcomingSessionItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        ClipRRect(
            borderRadius: BorderRadius.circular(25),
            child: Image.asset('assets/images/yoga-1.jpg')),
        Container(
          height: 100,
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: [
              Row(
                children: [
                  Column(
                    children: [
                      Text(
                        "9 am - 10:30 am",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text("Yoga for Beginners with Emily Cassel")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}
stack overflow Flutter Stack positioning and overflow
原文答案
author avatar

接受的答案

Wrap your Container(Widget) which is inside the stack with the Positioned Widget and set the bottom, left, and right attributes. and you will get the output

You can try this code by copy-paste in your editor.

Example Code here

import 'package:flutter/material.dart';

class StackExample extends StatefulWidget {
  @override
  _StackExampleState createState() => _StackExampleState();
}

class _StackExampleState extends State<StackExample> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return
      Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(20),
      child: Stack(
        clipBehavior: Clip.none,
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          ClipRRect(borderRadius: BorderRadius.circular(25), child: Image.asset('assets/image.png')),
          Positioned(
            bottom: -50,
            right: 20,
            left: 20,
            child: Container(
              height: 150,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Colors.white,
              ),
              padding: EdgeInsets.all(20),
              alignment: Alignment.center,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "TITLE",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, decoration: TextDecoration.none, color: Colors.black),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "Hey, There?",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, decoration: TextDecoration.none, color: Colors.black),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "This is the example",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15, decoration: TextDecoration.none, color: Colors.black),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

答案:

作者头像

You can use Column

 return Stack(
      clipBehavior: Clip.none,
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Column(
          children: [
            ClipRRect(
                borderRadius: BorderRadius.circular(25),
                child: Image.asset('assets/images/yoga-1.jpg')),
            Container(
              height: 50, //Any space you want
            ),
          ],
        ),
        Container(
          height: 100,
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: [
              Row(
                children: [
                  Column(
                    children: [
                      Text(
                        "9 am - 10:30 am",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text("Yoga for Beginners with Emily Cassel")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
作者头像

You can use Padding for the container which is on top. Like this:

Padding(
   padding: EdgeInsets.only(top: 40),
   child: Container(
      height: 100,
      padding: EdgeInsets.all(20),
      color: Colors.white,
      child: Column(
        children: [
          Row(
            children: [
              Column(
                children: [
                  Text(
                    "9 am - 10:30 am",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text("Yoga for Beginners with Emily Cassel")
                ],
              )
            ],
          )
        ],
      ),
    ),
)
作者头像

Solution moved from the question to an answer:

I changed this:

alignment: AlignmentDirectional.bottomCenter

to this:

alignment: AlignmentDirectional.center

and I wrapped my container with Positioned widget and I changed bottom:0 property