Question

我想将图像固定在屏幕的页脚中，因此在其他手机中，图像始终位于底部。

我尝试过的事情

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

其他问题：有没有一种方法可以创建画布并将其放置在图像上，因此，如果我想绘制一些东西而不是全屏，可以在图像上使用相对坐标

Answer 1

请为您将来遇到的每个问题写一个问题-以便将来对其他人更容易搜索和使用。

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

首先，如果希望图像始终位于屏幕的底部，则可以简单地使用bottomNavigationBar property of the Scaffold。看起来必须是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小部件中（因为这会使它扩展为适合可能，应该是除图像占用空间以外的所有内容。

Answer 2

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

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

Answer 3

您可以在 Scaffold

中使用 persistentFooterButtons 小部件

   @override
     Widget build(BuildContext context) {
     // TODO: implement build
       return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
       title: Text('Demo App'),
        ),
    body: _questionIndex < _questions.length
        ? Quiz(
            list: _questions,
            selectHandler: _printAns,
            questionIndex: _questionIndex)
        : Result(_totalScore, _resetQuiz),
    persistentFooterButtons: <Widget>[

      Row(
        children: <Widget>[
          RaisedButton(
            onPressed: null,
            child: Text('Prev'),
          ),
          RaisedButton(
            onPressed: null,
            child: Text('Next'),
          ),
        ],
      )
    ],
  ),
);

如何用颤动固定页脚中的小部件

3 个答案: