颤动问题：如何在卡片的右上角制作即将到来的部分

Question

我想在右上角制作即将到来的部分，但我不知道该怎么做。

我想在右上角制作即将到来的部分，但我不知道该怎么做。 我想在右上角制作即将到来的部分，但我不知道该怎么做。

这是纽约代码

InkWell(
                        onTap: () {
                          // Navigator.pushReplacement(
                          //   context,
                          //   MaterialPageRoute(
                          //     builder: (context) => HomePage(),
                          //   ),
                          // );
                          // setState(() {
                          //   isSelect = 1;
                          // });
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
                          child: SizedBox(
                            height: 147,
                            width: MediaQuery.of(context).size.width,
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Stack(
                                  children: [

                                    Container(
                                      padding: EdgeInsets.only(right: 15, left: 15),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                        image: DecorationImage(
                                          image: AssetImage("assets/orange_card.png"),
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      height: 147,
                                      width: MediaQuery.of(context).size.width,
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Padding(
                                            padding: const EdgeInsets.only(top: 16.0),
                                            child:Column(
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  "Explorer Package",
                                                  style: TextStyle(
                                                      fontSize: tSize18,
                                                      fontWeight: FontWeight.w500),
                                                ),
                                                SizedBox(
                                                  height: 6,
                                                ),
                                                Text(
                                                  "Best package for price",
                                                  style: TextStyle(
                                                    fontSize: tSize14,
                                                  ),
                                                ),
                                                SizedBox(
                                                  height: 13,
                                                ),
                                                Text(
                                                  "$99 USD",
                                                  style: TextStyle(
                                                      fontSize: tSize27,
                                                      fontWeight: FontWeight.w500),
                                                ),
                                              ],
                                            ),
                                          ),
                                          Padding(
                                            padding: EdgeInsets.only(bottom: 8),
                                            child: Image.asset(
                                              'assets/onbb.png',
                                              height: 114,
                                              width: 114,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Positioned(
                                    bottom: 130,
                                      right: 0,
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color: Color(0xff158998),
                                          borderRadius: BorderRadius.only(
                                            bottomLeft: Radius.circular(10),
                                            topRight: Radius.circular(20),
                                          ),
                                        ),
                                        width:160,
                                        height: 25,
                                        child: Center(
                                          child: Text(
                                            'Upcoming Plans',
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: tSize14,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),

                                  ],
                                ),
                                Positioned(
                                  width: 18,
                                  bottom: 0,
                                  child: Center(
                                    child: Container(
                                      height: 15,
                                      width: 15,
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(50),
                                      ),
                                      child: Theme(
                                        data: ThemeData(
                                          //here change to your color
                                          unselectedWidgetColor:
                                              Color(0xff3a99a4),
                                        ),
                                        child: Radio(
                                          activeColor: Colors.green,
                                          overlayColor:
                                              MaterialStateProperty.all(
                                                  Colors.red),
                                          value: isSelect,
                                          groupValue: 1,
                                          onChanged: (int? value) {
                                            // setState(() {
                                            //   isSelect = value!;
                                            // });
                                          },
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

其实我想要这样

但它变成了这个样子。我想要右上角的即将到来的部分。

Answer 1

清理代码可能会让您的生活更轻松。您有多个堆栈，这通常是可以简化布局的标志。但是您的问题可以通过一些小的更改来解决。 运行 应用程序的解释和图像在代码下方。

即将发生的计划变更：

               Positioned(
              // bottom: 130,
              top: 0,
              right: 0,
              child: Container(
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                  color: Color(0xff158998),
                  borderRadius: BorderRadius.all(Radius.circular(20)
                  ),
                ),
                width:160,
                height: 28,
                child: const Center(
                  child: Text(
                    'Upcoming Plans',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                    ),
                  ),
                ),
              ),
            ),

Explorer 包容器更改

              Container(
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.only(right: 15, left: 15),

带有“Explorer Package”的容器和带有“Upcoming plans”（在其上方分层）的容器需要有偏移量，可以是位置，也可以是边距。

首先，将“即将到来的计划”固定在顶部，而不是底部。那样的话，explorer包再高，看起来也还行。然后，设置 Explorer 容器的边距以使其从包中偏移。

最后，我认为您需要 Upcoming Plans 容器边框的对称半径。

我已经修改了代码并 运行 它。我更改了一些背景颜色，以便您可以清楚地看到我在做什么。我想你希望它看起来像这样：

同样，如果您简化布局，将来您和其他人都会更轻松。使用一堆并尝试删除固定高度。它使您的卡片更难重复使用（尤其是当您获得新的图形资产时）。祝你好运。