Stack Flutter 的对齐问题答案

【问题标题】：Alignment issues with Stack flutterStack Flutter 的对齐问题
【发布时间】：2020-11-23 09:13:00
【问题描述】：

我的设计显示了 Flash 报价计数，但是当我尝试如下图进行设计时，小部件的对齐方式无法正常工作。我如何处理这个设计？我尝试了很多代码，但都没有得到想要的结果。

我正在尝试创建的设计

到目前为止我所做的设计

代码

  Widget FlashOffers(){
    return GestureDetector(
      onTap: (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FlashOfferListScreen(),
          ),
        );
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stack(
          children: [
            Container(
              height: 50,
              width:350,
              decoration: new BoxDecoration(
                color: Colors.red,
                  borderRadius: BorderRadius.all(Radius.circular(15))
              ),
            ),
            Center(child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
            )),
            Row(
              // crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Stack(
                  children: [
                    SvgPicture.asset("assets/images/YELLOW.svg"),
                    Text("3")
                  ],
                ),

              ],),

          ],
        ),
      ),
    );

  }

【问题讨论】：

不用栈也可以实现
你能帮我写代码吗@FaiiziiAwan

标签： flutter dart flutter-layout

【解决方案1】：

试试这个：删除你的行小部件并添加对齐：Alignment.center 到行中的堆栈。用 Align Widget 包裹 Stack 并添加对齐方式：Alignment.centerRight

Widget flashOffers() {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Container(),
          ),
        );
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stack(
          children: [
            Container(
              height: 50,
              width: 350,
              decoration: new BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.all(Radius.circular(15))),
            ),
            Center(
                child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                "Flash Offers",
                style: TextStyle(
                    fontSize: 18,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            )),
            Align(
              alignment: Alignment.centerRight,
              child: Stack(
                alignment: Alignment.center,
                children: [
                   SvgPicture.asset("assets/images/YELLOW.svg"),
                   Text("3")
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

【讨论】：

我认为他不需要使用堆栈小部件来设计这个按钮
没有堆栈是不行的。这里肯定需要堆栈。因为 SvgPicture 和它在按钮末尾的对齐方式。虽然按钮和文本的背景可以制作成一个小部件。但仅此而已。
这是一个按钮小部件 Taha。它将有一个行小部件作为子小部件。行将有 2 个孩子，第一个是 Text，另一个是具有自定义背景的 CircularAvatar（如 sn-p，黄色一个）。然后圆形头像将为孩子提供一个显示数字的文本小部件。要进行对齐，您可以使用 Spacer() 或 Flex 文本（按钮），文本将居中对齐。
如果我删除 svgpicture 并使用 Container，则此方法有效，如果我使用 svg 图标，则对齐失败@TahaMalik
尝试为svg图片添加宽度和高度。

【解决方案2】：

您应该考虑在容器小部件中添加标签和计数器图标。

您的代码应如下所示：

Widget flashOffers() {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FlashOfferListScreen(),
          ),
        );
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 50,
          width: 350,
          padding: EdgeInsets.symmetric(horizontal: 16),
          decoration: new BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.all(Radius.circular(15))),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Flash Offers",
                    style: TextStyle(
                        fontSize: 18,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Stack(
                alignment: Alignment.center,
                children: [
                  SvgPicture.asset("assets/images/YELLOW.svg"),
                  Text("3"),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

【讨论】：

你只是重复了我的回答。
@TahaMalik 我已经移除了外部 StackWidget，不需要了
@Assassin 有什么问题？
SvgPicture 导致对齐问题仍然@yusufpats
这是 svg 的问题，但是我得到了 Faizii Awan 的简单回答，谢谢你的努力@yusufpats

【解决方案3】：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: flashOffers(),
          ),
        ),
      ),
    );
  }

  Widget flashOffers() {
    return GestureDetector(
      onTap: () {
        print('new route push');
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 350,
          padding: EdgeInsets.all(15),
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Color(0xFFc1202e),
                  Color(0xFFea2127),
                ],
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(30),
              ),
              boxShadow: [
                BoxShadow(
                  blurRadius: 10,
                  offset: Offset(-10, 10),
                  color: Colors.black26,
                ),
              ]),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  "Flash Offers".toUpperCase(),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Stack(
                alignment: Alignment.center,
                children: [
                  Icon(
                    Icons.folder,
                    size: 30,
                    color: Colors.yellowAccent,
                  ),
                  Text(
                    '3',
                    style: TextStyle(color: Colors.red),
                  ),
                ],
              ),
              SizedBox(width: 10),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

这可行，但如果我删除图标并使用 svgIcon ，如果我使用 svg 图标对齐失败@TahaMalik
请使用 png 图标而不是 svg。据我所知，flutter 不支持 svg。要使用 svg 图标，您需要使用外部库（我认为）
@assasin 将链接添加到 svg 文件中，我会把它放在我的答案中
Faiizii Awan 的方法很简单，但感谢您@Kherel 的努力

【解决方案4】：

这是不使用堆栈的示例。希望你能得到这个想法，它会有所帮助:-)

return MaterialButton(elevation: 8,
    color: Colors.redAccent,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0)
    ),
    child: Row(children: [
      Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
      CircleAvatar(
          backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
    ]),
    onPressed: () {
      print('button pressed');
    });

编辑：要显示阴影，请使用按钮的高度属性。您还可以更改阴影颜色

【讨论】：

好的，让我为你设计一个按钮，我会更新我的答案
我更新了答案。请检查一下。它解决了您的小部件定位问题。为了获得确切的结果，我认为您现在可以进行自定义 :-) 快乐编码
它工作了，但我需要额外的自定义，但它更容易@Faiizii Awan
是的，使用按钮小部件非常容易。不需要堆栈 ;-) 继续飘扬 :-D
这种方法的问题是文本不会在精确的中心

【解决方案5】：

您可以使用定位，它在堆栈小部件中非常有用。看这个： https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.

【讨论】：

我做了定位没有得到想要的设计@semih10
你试过堆栈的对齐属性吗？
是的，我做到了@semih10

【解决方案6】：

试试这个

Container(
                          height: 50,
                          width: MediaQuery.of(context).size.width * 0.65,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.0),
                          ),
                          child: FlatButton(
                            splashColor: iconButton,
                            shape: RoundedRectangleBorder(
                                borderRadius:
                                BorderRadiusDirectional.circular(20)),
                            color: primaryColor,
                            onPressed: () {
                              sendMail();
                            },
                            child: Center(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                 Container(),
                                  Text(
                                    "Send",
                                    style: styleText(
                                        size: 20,
                                        weight: FontWeight.bold,
                                        color: white),
                                  ),
                                  Container(
                                  child:  Center(
                                      child: SvgPicture.asset(
                                        ic_profileWhite,
                                        height: 20,
                                        width: 20,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),

【讨论】：