Question

我无法找到任何使用Flutter / Dart创建页脚导航栏的文档。我知道“ crossAxisAlignment：CrossAxisAlignment.end ”可用于将内容拉到列的底部。但是，我不确定如何渲染粘贴在屏幕底部的网站页脚。 flex和css网格中有各种解决方案，但不清楚这个平台的实现情况。

medium

如您所见，我目前正在使用ListView来布局小部件。我现在唯一能想到的就是将整个ListView放在一个列中，将crossAxisAlign设置为End，以便将所有内容都拉下来，然后相对于页脚设置每个小部件的样式。必须有更好的方法吗？

Answer 1

由于您使用的是Scaffold，因此您可以使用bottomNavigationBar来粘贴＆＃39;底部小部件。（如果您愿意，可以使用BottomNavigationBar）

new Scaffold(
  appBar: new AppBar(title: new Text("Title")),
  body: new ListView.builder(
    itemBuilder: (context, index) {
      return new ListTile(
        title: new Text("title $index"),
      );
    },
  ),
  bottomNavigationBar: new Container(
    height: 40.0,
    color: Colors.red,
  ),
);

或者你的

我现在唯一能想到的就是将整个ListView放在一个列中

根本不是一个坏主意。这就是事情如何发挥作用。虽然MainAxisAlignement.end不是正确的做法。

您可以使用bottomNavigationBar以这种方式实现与没有脚手架的Column相同的布局：

new Column(
  children: <Widget>[
    new Expanded(
      child: new ListView.builder(
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text("title $index"),
          );
        },
      ),
    ),
    new Container(
      height: 40.0,
      color: Colors.red,
    ),
  ],
),

Answer 2

当您有需要列表视图的项目列表时，使用列表视图是一个很好的选择。有时，布局中的其他项目可能是固定的，不需要列表视图。例如使用列。

有关如何使用stack实现固定页脚的示例。

 @override
   Widget build(BuildContext context) {
    return new Material(
      child: Scaffold(
        body: Stack(
        children : <Widget> [
         Text("Top positioned text"),
         Column(
            children : <Widget> [
               Text("Column:Top positioned text"),
               Text("Column:Top positioned text")
             ]
            ),
         Positioned(
            bottom : 0,
            child: Text("Bottom positioned text")
         )
        ]
      )
    }

Answer 3

您可以使用flutter_layouts中的页脚

粘性页脚可能很难实现。由于您必须知道页脚的高度，因此无法在build（）函数中执行此操作。

在下面的flutter软件包中试用。

https://github.com/softmarshmallow/flutter-layouts/tree/master/lib/src/footer https://github.com/softmarshmallow/flutter-layouts/

由此，您可以将页脚与脚手架底部导航一起使用。 example

vector_paste_vertical

创建粘性网站页脚

3 个答案: