如何使用颤动修复页脚中的小部件

Question

我想修复屏幕页脚中的图像，因此在不同的手机中它始终位于底部。

我试过的

我尝试使用Column，然后在mainAxisAlignment我会使用MainAxisAlignment.end

附加问题： 有没有办法创建画布并将其放置在图像上，因此如果我想绘制某些内容而不是全屏，我可以在图像上使用相对坐标

Answer 1

您可以在脚手架中使用bottomSheet。这会自动允许您将小部件固定在显示屏的底部

return Scaffold(
  bottomSheet: yourWidget(),
  body: Container(color: Colors.red,)
);

Answer 2

请为您将来遇到的每个问题写一个问题 - 这将使它们在未来对其他人更易于搜索和有用。

但是，我想我可以很简单地回答这两个问题，所以我会的。

首先，如果您希望图像始终位于屏幕底部，您可以简单地使用bottomNavigationBarScaffold的属性。看起来它必须是一个 BottomNavigationBar 但实际上您可以传递任何您想要的小部件。

这是代码（您可以将其粘贴到文件中并运行该文件，因为它是自封闭的）：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        bottomNavigationBar: Stack(
          children: [
            new Container(
              height: 100.0,
              color: Colors.green,
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: 0.0,
              bottom: 0.0,
              child: new CustomPaint(
                painter: Painter(),
                size: Size.infinite,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset.zero, size.bottomRight(Offset.zero), Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // bad, but okay for example
    return true;
  }
}

我刚刚使用了一个简单的画家来说明“画布”以及如何将其定位为与图片相同的位置，以及一个带有颜色而不是图片的容器，因为我不想将资产添加到我的项目中。定位小部件使画布可以根据图像调整大小，而不是相反，如果您将它们直接放入堆栈中就会发生这种情况。

请注意，如果您不想使用脚手架，您也可以使用 Column 来执行此操作，将您想要的任何身体包裹在一个 Expanded 小部件中（因为这将使其扩展以适应尽可能多的空间，这应该是除了图像占用的空间之外的所有内容）。