有没有更好的方法来制作这个闪屏布局？

Question

我一直在想如何制作这个简单的布局：

我想出的解决方案如下所示：

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.red,
                padding: const EdgeInsets.all(8.0),
                height: 75,
                width: 75,
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('App name'),
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Copyright'),
            ),
          ),
        ],
      ),
    );
  }
}

但我不确定是否有一种更优雅的方式将“徽标图像”（红色容器）居中，其下方是“应用程序名称文本”，同时位于屏幕底部，“版权文本”。

我尝试使用“列”小部件构建布局，但“对齐”小部件不会对“版权文本”的位置进行任何更改：

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.red,
              padding: const EdgeInsets.all(8.0),
              height: 75,
              width: 75,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('App name'),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Copyright'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这给了我下一个结果：

那么...有没有更好的方法来制作这个闪屏布局？当您想要将元素放置在屏幕的中心和底部时，也许有一个小部件是正确的选择。

Answer 1

在列外但在堆栈内使用定位布局，如下所示：

Positioned( bottom:0,
            child: Align( alignment: Alignment.center, 
                       child:Text("Copyright"))
)

Answer 2

如果您只想使用 Column 而不使用 Stack，您可以将两个容器放入 Column 中并将它们包装在 Expanded widget 中，如下代码所示：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(),
          ),
          Container(
            color: Colors.red,
            padding: const EdgeInsets.all(8.0),
            height: 75,
            width: 75,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('App name'),
          ),
          Expanded(
            child: Container(),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Copyright'),
          ),
        ],
      ),
    );

Answer 3

如果有人仍需要答案，请尝试以下操作：

    Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body:

  Container(
    width: double.infinity,
    child:
    Column(
      children: [
        Expanded(child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.red,
              padding: const EdgeInsets.all(8.0),
              height: 75,
              width: 75,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('App name'),
            ),
          ],
        )),
        Container(
          child:Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Copyright'),
              ),
            ],
          ),

        )

      ],
    ),

  ),

);

}