Flutter Stack 定位和溢出答案

【问题标题】：Flutter Stack positioning and overflowFlutter Stack 定位和溢出
【发布时间】：2021-07-09 08:17:35
【问题描述】：

我目前正在研究颤振。我正在将堆栈用于堆栈 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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

【问题讨论】：

答案属于答案，而不是对问题的编辑。

标签： flutter dart

【解决方案1】：

使用 Positioned Widget 包裹堆栈内的 Container(Widget) 并设置底部、左侧和右侧属性。你会得到输出

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

此处为示例代码

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

【讨论】：

【解决方案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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );

【讨论】：

【解决方案3】：

您可以将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")
                ],
              )
            ],
          )
        ],
      ),
    ),
)

【讨论】：

【解决方案4】：

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

我改变了这个：
alignment: AlignmentDirectional.bottomCenter
到这里：
alignment: AlignmentDirectional.center
我用 Positioned 小部件包裹了我的容器并更改了 bottom:0 属性

【讨论】：