对齐堆栈元素颤动

Question

几天前，我已经开始使用flutter，并且正在开发一个应用程序，该应用程序试图将标题放置在屏幕中央，并将图像放置在屏幕右上角。我有以下代码。但这似乎不起作用。

return Scaffold(
  body: SafeArea(
    child: Padding(
      padding: const EdgeInsets.only(top: 30),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Text(
                    "Launching",
                    textAlign: TextAlign.center,
                    style: GoogleFonts.poppins(
                        fontWeight: FontWeight.w700, fontSize: 18),
                  ),
                ),
              ),
              Container(
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"),
                ),
              ),
            ],
          )
        ],
      ),
    ),
  ),

有人可以告诉我如何实现这一目标吗？

Answer 1

我认为这是您要实现的目标：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(top: 30),
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Text(
                      "Launching",
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Container(
                      child: CircleAvatar(
                        backgroundImage: NetworkImage(
                            "https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

产生以下结果：

Answer 2

使用Stack时，应仅使用Positioned，Align和Center小部件来放置小部件。

示例应用程序：

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter To Do',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Text(
                "center",
              ),
            ),
            Align(
              alignment: AlignmentDirectional.centerStart,
              child: Text('start'),
            ),
            Positioned(
              left: 16,
              top: 16,
              width: 64,
              height: 64,
              child: CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

结果：

Answer 3

只需使用容器的对齐属性。

我已为您更改了代码，希望对您有所帮助：

Scaffold(
        body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.only(top: 30),
        child: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Text(
                  "Launching",
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 30),
              alignment: Alignment.topRight,
              child: CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg"),
              ),
            ),
          ],
        ),
      ),
    ));