创建粘性站点页脚 [英] Creating a Sticky Site Footer
问题描述
我无法找到任何有关使用Flutter / Dart创建页脚导航栏的文档。我知道 crossAxisAlignment：CrossAxisAlignment.end 可用于将内容拉到列的底部。但是，我不确定如何呈现粘贴在屏幕底部的网站页脚。 flex和css网格中有多种解决方案，但不清楚该平台的实现方式。
import‘package：flutter / material.dart’;
导入的 package：flutter / rendering.dart；
void main（）{
runApp（new MyApp（））;
}
类MyApp扩展了StatelessWidget {
@override
Widget build（BuildContext context）{
Widget siteLogo = new Container（
padding：const EdgeInsets.only（top：100.0），
child：new Image.asset（
'images / logo.png'，
width：180.0，
高度：180.0，
），
）；
小部件titleTextSection = new Container（
padding：const EdgeInsets.only（left：80.0，right：80.0，top：30.0，bottom：20.0），
child：new Text （
'''Welcome to the Site'''，
textAlign：TextAlign.center，
样式：new TextStyle（
fontSize：35.0，
fontWeight：FontWeight .w500，
），
），
）;
小部件subtitleTextSection = new Container（
padding：const EdgeInsets.only（left：40.0，right：40.0，bottom：40.0），
child：new Text（
'''Lorem ipsum dolor sit amet，consectetur adipiscing elit。Donec imperdiet Donec imperdiet。'''，
textAlign：TextAlign.center，
样式：new TextStyle（
fontSize：15.0，
fontWeight：FontWeight.w400
），
），
）;
//页脚
列signInLink（字符串标签）{
返回新列（
mainAxisAlignment：MainAxisAlignment.center，
子级：[
新的容器（
子级：new文本（
标签，
样式：new TextStyle（
字体大小：16.0，
fontWeight：FontWeight.w400，
颜色：const Color（0xFFf735e9）
），
），
），
]，
）;
}
列existingAccountLink（String label）{
return new Column（
mainAxisAlignment：MainAxisAlignment.center，
子代：[
新Container（
子代：new Text（
标签，
样式：new TextStyle（
fontSize：16.0，
fontWeight：FontWeight。 w400，
color：const Color（0xFFeceff1）
），
），
），
]，
）;
}
小部件页脚=新容器（
高度：50.0，
装饰：新BoxDecoration（颜色：Colors.black），
子级：新Row（
mainAxisAlignment：MainAxisAlignment.spaceEvenly，
子级：[
existingAccountLink（'已经有一个帐户？'），
signInLink（'SIGN IN'），
]，
），
）;
返回新的MaterialApp（
标题：'Flutter Demo'，
主页：new Scaffold（
body：new Container（
装饰：new BoxDecoration（
图片：new装饰图像（
图片：new AssetImage（'images / backgroundimg.jpg'），
适合：BoxFit.cover，
），
），
子级：新建ListView（
子级：[
siteLogo，
titleTextSection，
subtitleTextSection，
页脚，
]，
） ，
）
），
）;
}
}
如您所见，我目前正在使用ListView布局小部件。我现在唯一能想到的就是将整个ListView放在单个列中，将crossAxisAlign放置到End，以便将所有内容下拉，然后相对于页脚设置每个小部件的样式。一定有更好的办法吗？
由于使用的是脚手架，因此可以使用 bottomNavigationBar 具有一个粘性底部小部件。 （并可能使用
I have not been able to locate any documentation for creating footer nav bars with Flutter/Dart. I know that "crossAxisAlignment: CrossAxisAlignment.end" can be used to pull content to the bottom of a column. However, I'm not sure how to render a site footer that sticks to the bottom of the screen. There are various solutions in flex and css grid, but not clear on what implementation would look like in this platform.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget siteLogo = new Container(
padding: const EdgeInsets.only(top: 100.0),
child: new Image.asset(
'images/logo.png',
width: 180.0,
height: 180.0,
),
);
Widget titleTextSection = new Container(
padding: const EdgeInsets.only(left: 80.0, right: 80.0, top: 30.0, bottom: 20.0),
child: new Text(
''' Welcome to The Site''',
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.w500,
),
),
);
Widget subtitleTextSection = new Container(
padding: const EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: new Text(
'''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet Donec imperdiet.''',
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w400
),
),
);
// footer
Column signInLink(String label) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Container(
child: new Text(
label,
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
color: const Color(0xFFf735e9)
),
),
),
],
);
}
Column existingAccountLink(String label) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Container(
child: new Text(
label,
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
color: const Color(0xFFeceff1)
),
),
),
],
);
}
Widget footer = new Container(
height: 50.0,
decoration: new BoxDecoration(color: Colors.black),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
existingAccountLink('Already have an account?'),
signInLink('SIGN IN'),
],
),
);
return new MaterialApp(
title: 'Flutter Demo',
home: new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/backgroundimg.jpg'),
fit: BoxFit.cover,
),
),
child: new ListView(
children: [
siteLogo,
titleTextSection,
subtitleTextSection,
footer,
],
),
)
),
);
}
}
As you can see, I am currently using ListView to layout the widgets. The only thing I can think of right now is to put the whole ListView in a single column, crossAxisAlign to End so everything gets pulled down, and then style each widget relative to the footer. There must be a better way though?
Since you are using Scaffold, you can use bottomNavigationBar to have a 'sticky' bottom widget. (And potentially use BottomNavigationBar if you want to)
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,
),
);
Alternatively your
The only thing I can think of right now is to put the whole ListView in a single column
is not a bad idea at all. That's how things works in flutter.
Although MainAxisAlignement.end is not the right way to do it.
You could achieve the same layout as with bottomNavigationBar without a Scaffold, using a Column this way :
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,
),
],
),
这篇关于创建粘性站点页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
