flutter - 将图像放置在屏幕下方一些像素处颤动

Question

我是 Flutter 的新手，对于教程屏幕，我设计了单行主文本、两行子文本和一个我们应该在屏幕底部下方放置一些像素的图像。在 iOS 中，我会将此图像的底部约束设置为 -40 像素。我们如何在 Flutter 中实现这一点？此外，教程屏幕有分页。

任何帮助表示赞赏。

Answer 1

您可以尝试这样的事情，基本上在 Stack 小部件中使用 Positioned 小部件：

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Positioned(
            //left: 0,
            bottom: -40,
            child: Image(
              image: NetworkImage("https://picsum.photos/350/550"),
            ),
          ),
          Column(
            children: [
              Text("Hello World!", style: TextStyle(fontSize: 40)),
              Text("Hello World!", style: TextStyle(fontSize: 26)),
            ],
          )
        ],
      ),
    );
  }
}