如何在 Flutter 中使用 Stack、Row 和类似元素独立定位元素

Question

我一直在尝试使用 Stack、Positioned、Row 和类似的相关小部件在 Flutter 中复制这两种设计，但是，我一次又一次地陷入相同的阶段。我无法将文本居中或无法正确放置后退按钮。另外，我尽量不使用 fixed sizes/positions 因为这应该在某种程度上适应不同的屏幕尺寸。有人能给我指出正确的方向吗？如何创建这个或类似的布局，这些布局将在其他屏幕中重复使用？

示例 1：

示例 2：

Answer 1

对于您的示例 numero 1，我提出了这个解决方案：

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Container(
              margin: const EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Color(0xFF0B2746),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Container(
                margin: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 18),
                      child: Text(
                        'Glossary',
                        style: TextStyle(
                          fontWeight: FontWeight.w800,
                          fontSize: 20,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Card(
                    margin: const EdgeInsets.only(left: 0),
                    child: Padding(
                      padding: const EdgeInsets.all(12),
                      child: Icon(Icons.arrow_back_ios),
                    ),
                    elevation: 6,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

结果如下：

对于你的第二个例子，我不得不添加额外的逻辑：

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Container(
              margin: const EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Color(0xFF0B2746),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Column(
                children: [
                  Container(
                    height: 64.0,
                    width: double.infinity,
                    margin: const EdgeInsets.only(left: 54, right: 8, top: 8),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Row(
                      children: <Widget>[
                        SizedBox(width: 20),
                        Icon(Icons.train, size: 35),
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 18),
                            child: Text(
                              'Metro',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontWeight: FontWeight.w800,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                        Icon(Icons.arrow_drop_down, size: 35),
                        SizedBox(width: 20),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                        margin: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                        )),
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Card(
                    margin: const EdgeInsets.only(left: 0),
                    child: Padding(
                      padding: const EdgeInsets.all(12),
                      child: Icon(Icons.arrow_back_ios),
                    ),
                    elevation: 6,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

这一个的结果如下：

如何在 Flutter 中使用 Stack、Row 和类似元素独立定位元素

How to position elements independently using Stack, Row, and similar elements in Flutter

positioning

widget

css-position

flutter