【问题标题】:Transparent sticky footer in FlutterFlutter中的透明粘性页脚
【发布时间】:2018-04-20 06:03:16
【问题描述】:

我是following this Stack Overflow post,因为我制作了一个粘性页脚。页脚的表现与它需要的一样,但有没有办法增加透明度,以便页脚后面的列表中的项目可见?

实心页脚

透明页脚

这里是制作实心页脚的所有代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: new ListView.builder(
              itemCount: 200,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text("title $index"),
                );
              },
            ),
          ),
          new Container(
            height: 40.0,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    您可以使用Stack 将小部件显示在彼此的顶部。

    new Scaffold(
      body: new Stack(
        alignment: Alignment.bottomCenter,
        children: [
          new ListView(...),
          new Container(height: 40.0, color: Colors.red),
        ],
      ),
    ),
    

    【讨论】:

    • 感谢您的回复,我刚刚尝试过,页脚现在将与最后一项重叠(使用itemCount: 200 设置)https://i.imgur.com/oRpy3AC.png。要解决这个问题,您是否认为测量 Container 的高度(因为我希望 Container 高度根据里面的文本是动态的)然后添加额外的填充是 Flutter 中最好的解决方法?
    • 这不是你要求的吗?
    • 没有图片很难解释,但我不希望容器掩盖最后一个列表项。所以你只需要滚动到 ListView 高度 + 40 这样整个列表仍然可以滚动。
    猜你喜欢
    • 2014-06-01
    • 2013-02-23
    • 2022-06-30
    • 2018-03-17
    • 1970-01-01
    • 1970-01-01
    • 2012-12-28
    • 2019-07-01
    • 1970-01-01
    相关资源
    最近更新 更多