Flutter 堆栈定位和溢出

Question

我目前正在研究 flutter。我正在使用 stack 作为 stack 2 小部件。但我有一些问题。

这就是我正在努力做的事情。

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

这是我的代码：

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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

用Positioned Widget 包裹堆栈内的Container(Widget)，并设置bottom、left、right 属性。你会得到输出

您可以通过在编辑器中复制粘贴来尝试此代码。

示例代码在这里

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),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

您可以使用

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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );

Answer 3

解决方案从问题转移到答案：

我改变了这个：

alignment: AlignmentDirectional.bottomCenter

对此：

alignment: AlignmentDirectional.center

我用 Positioned 小部件包装了我的容器，并且更改了

bottom:0

属性

Answer 4

使用 Positioned 小部件将容器（或任何小部件）包装在 Stack 中，并根据需要定义底部、左侧和右侧属性。它会对你有帮助。

Answer 5

您可以使用

Padding

来表示顶部的容器。像这样：

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")
                ],
              )
            ],
          )
        ],
      ),
    ),
)