程序员经验分享-hwhale

高度大于屏幕高度的 Flutter 可滚动堆栈

2024-02-06

我有一个小部件层次结构，其中SingleChildScrollView是父母有Stack作为孩子，Stack有两个孩子，如果第二个孩子超出屏幕高度，其高度就会被剪裁。根据文档，堆栈占用的大小根据Non-Positioned孩子。所以这意味着我们必须明确地给出高度Stack，但这个高度是任意的，它不会包裹里面的内容。我的主要目的是包装SingleChildScrollView高度而不是底部有空白空间。

SingleChildScrollView(
    child: Container(
      height: MediaQuery.of(context).size.height + 150,
      child: SafeArea(
        bottom: false,
        child: Stack(
           fit: StackFit.expand,
          children: <Widget>[
              Container(height:MediaQuery.of(context).size.height * .35,),
              Positioned(top: top: MediaQuery.of(context).size.height * .35 +
                  MediaQuery.of(context).viewInsets.top,..)
                 ...]))))

[![图片][1]][1]

[1]: https://i.stack.imgur.com/ZnoP0.png https://i.stack.imgur.com/ZnoP0.pngenter image description here


解决方案#1

如果这不是您要找的，请告诉我。

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 44, left: 24, right: 24, bottom: 20),
            color: Colors.deepPurpleAccent,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                    Spacer(),
                    IconButton(
                      icon: Icon(Icons.more_vert),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.white, width: 100, height: 100),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          _myText("Your name", 16),
                          _myText("24 years old", 14),
                          SizedBox(height: 6),
                          _myText("Martial status", 16),
                          _myText("Unmarried", 14),
                          SizedBox(height: 6),
                          Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                          SizedBox(height: 12),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  width: double.maxFinite,
                  child: OutlineButton(
                    borderSide: BorderSide(color: Colors.white, width: 2),
                    onPressed: () {},
                    child: _myText("CHANGE PLAN", 16),
                  ),
                ),
                Text(
                  "Higher plans give you more connects",
                  style: TextStyle(fontSize: 10, color: Colors.white70),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: <Widget>[
                _buildCard1(),
                _buildCard(size: 70, color: Colors.deepOrange),
                _buildCard(size: 80, color: Colors.purple),
                _buildCard(size: 90, color: Colors.pink),
                _buildCard(size: 100, color: Colors.grey),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _myText(String data, double size) => Text(data, style: TextStyle(fontSize: size, color: Colors.white));

  Widget _buildCard1() {
    return Card(
      elevation: 4,
      margin: EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("PROFILE DETAILS"),
          ),
          Placeholder(fallbackHeight: 200),
          Divider(),
          SizedBox(
            width: double.maxFinite,
            child: FlatButton(
              onPressed: () {},
              child: Text("UPDATE MY PROFILE"),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCard({double size, Color color}) {
    return Card(
      margin: EdgeInsets.all(12),
      child: Container(height: size, color: color,),
    );
  }
}

解决方案#2

这是您要找的吗？ （这里我只修改了上面build()方法，其余方法保持不变。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.deepPurpleAccent,
    body: SafeArea(
      child: ListView(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
            color: Colors.deepPurpleAccent,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                    Spacer(),
                    IconButton(
                      icon: Icon(Icons.more_vert),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.white, width: 100, height: 100),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          _myText("Your name", 16),
                          _myText("24 years old", 14),
                          SizedBox(height: 6),
                          _myText("Martial status", 16),
                          _myText("Unmarried", 14),
                          SizedBox(height: 6),
                          Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                          SizedBox(height: 12),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  width: double.maxFinite,
                  child: OutlineButton(
                    borderSide: BorderSide(color: Colors.white, width: 2),
                    onPressed: () {},
                    child: _myText("CHANGE PLAN", 16),
                  ),
                ),
                Text(
                  "Higher plans give you more connects",
                  style: TextStyle(fontSize: 10, color: Colors.white70),
                ),
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.horizontal(left: Radius.circular(30), right: Radius.circular(30))
            ),
            child: Column(
              children: <Widget>[
                _buildCard1(),
                _buildCard(size: 70, color: Colors.deepOrange),
                _buildCard(size: 80, color: Colors.purple),
                _buildCard(size: 90, color: Colors.pink),
                _buildCard(size: 100, color: Colors.grey),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

解决方案#3

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: DecoratedBox(
        decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 300,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Container(
                  decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
                  padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          IconButton(
                            icon: Icon(Icons.arrow_back),
                            onPressed: () {},
                            color: Colors.white,
                          ),
                          Spacer(),
                          IconButton(
                            icon: Icon(Icons.more_vert),
                            onPressed: () {},
                            color: Colors.white,
                          ),
                        ],
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(color: Colors.white, width: 100, height: 100),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 12.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                _myText("Your name", 16),
                                _myText("24 years old", 14),
                                SizedBox(height: 6),
                                _myText("Martial status", 16),
                                _myText("Unmarried", 14),
                                SizedBox(height: 6),
                                Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                                SizedBox(height: 12),
                              ],
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        width: double.maxFinite,
                        child: OutlineButton(
                          borderSide: BorderSide(color: Colors.white, width: 2),
                          onPressed: () {},
                          child: _myText("CHANGE PLAN", 16),
                        ),
                      ),
                      Text(
                        "Higher plans give you more connects",
                        style: TextStyle(fontSize: 10, color: Colors.white70),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.orange,
                        borderRadius: BorderRadius.horizontal(
                          left: Radius.circular(30),
                          right: Radius.circular(30),
                        )),
                    child: Column(
                      children: <Widget>[
                        _buildCard1(),
                        _buildCard(size: 100, color: Colors.deepOrange),
                        _buildCard(size: 80, color: Colors.purple),
                        _buildCard(size: 100, color: Colors.pink),
                        _buildCard(size: 180, color: Colors.grey),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

flutter

flutterlayout

高度大于屏幕高度的 Flutter 可滚动堆栈 的相关文章

随机推荐

  • SSL 握手中止 - 确切原因是什么？

    在尝试建立 HTTPS 连接时 我收到 IOException SSL handshake aborted ssl 0x519ea2d8 I O error during system call Connection reset by pe

  • 自毁 Javascript 函数 - 它是如何工作的？

    所以我找到了这段代码 它显然有效 因为它已经投入生产多年 window someMethod function tmp callback prop val tmp Garbage collect window someMethod unde

  • Python 请求，警告：urllib3.connectionpool：连接池已满

    我正在 python 3 中使用 requests 库 尽管我尽了最大努力 但以下警告仍然无法消失 警告 requests packages urllib3 connectionpool 连接池已满 正在丢弃连接 myorganizatio

  • 允许电子邮件和用户名进行身份验证

    我正在使用 ASP Net Identity 2 1 创建两个项目 MVC 5 和 Web API 但我找不到如何使用电子邮件和用户名进行身份验证 名为 管理 的区域必须使用用户名 而公共区域必须使用电子邮件用于身份验证的地址 问题是只有一

  • 没有事务的 python-mysqldb

    我正在阅读有关 python 中事务如何工作的内容MySQLdb In 本教程 http zetcode com db mysqlpython 它说 在Python DB API中 我们不调用BEGIN语句来启动一个 交易 创建游标时会启动

  • CakePHP显示字段的使用

    你能告诉我如何使用 CakePHP 的 displayField 指令吗 我不知道如何使用它 因此 在模型文件中 我有以下代码

  • Python 无法捕获重写的 NameError

    你如何解释这一点 这段代码应该覆盖 NameError 然后捕获它 OldNameError NameError class NameError OldNameError pass try ccc except NameError as e

  • Pharo Smalltalk 的类似 Sinatra 的网络框架 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有没有Sinatra http www sinatrarb com 类似 Pharo 的网络框架 或者

  • C#-ToLower() 有时会删除字母“I”中的点

    在对某些字符串调用 ToLower 时 我们注意到一个奇怪的错误 输入字符串是 string s DocumentInfo string t s ToLower sometimes t documentinfo other times t

  • HBase区域服务器和Hadoop数据节点应该在同一台机器上吗？

    抱歉 我没有资源来设置集群来测试它 我只是想知道 我可以将 hbase 区域服务器部署在 hadoop 数据节点计算机之外的单独计算机上吗 我想答案是肯定的 但我不确定 hbase区域服务器和hadoop数据节点部署在不同的机器上是好是坏

  • 将 2 个 FRC 与一个 TableView 一起使用并配置 FRCDelegate

    我找到了这个帖子问题链接 https stackoverflow com questions 24556123 nsfetchedresultscontroller multiple frcs delegate error when upd

  • 用逗号分隔

    嘿 我有这个 following user id row following user id 我得到 44443344330 然后我使用 implode 函数并用逗号分隔 44 44 33 44 33 0 但我不想要最后一个数字的最后一个逗

  • 有没有办法将 SQL 查询中的 WHERE 和 HAVING 子句进行 OR 运算？

    假设我有一个 SQL 查询 SELECT Label1 Label2 SUM number as MySum FROM MyTable GROUP BY Label1 Label2 它给了我一些结果 比如 Label1 Label2 MyS

  • 如何在 FloatingActionButton 上显示图标？

    我在 FloatingActionButton 上显示图标时遇到问题 图标失去透明度 我有compileSdkVersion 28 依赖项是 dependencies implementation fileTree dir libs inc

  • 第一次查询速度慢

    当我对表执行第一个查询时遇到麻烦 即使我更改要查找的范围日期 后续查询也会快得多 我假设 PostgreSQL 实现了一种缓存机制 可以让后续查询更快 我可以尝试预热缓存 以便第一个用户请求可以命中缓存 但是 我认为我可以以某种方式改进以下

  • ViewPager OnLongClick 侦听器未触发

    我有一个包含 ViewPager 的片段 当我膨胀布局时 我为其分配一个 OnLongClick 侦听器 如下所示 mPager setOnLongClickListener mOnPagerLongClickListener 但是 当我长

  • zend gdata picasa php api 停止工作

    我已经使用 Zend Gdata 好几年了 然而 今天当我未更改的代码执行以下命令时 query this gt gp gt newAlbumQuery 我收到以下错误 exception Zend Gdata App HttpExcept

  • gstreamer：如何改变从文件中获取的一个流的渲染时间

    我有两个媒体文件 例如 file0 和 file1 我想将它们合并成一个具有 画中画 效果的单个 file0 中的内容要显示在整个窗口上 并且 file1 中的内容将显示在左上角 较小的盒子 还有一点是 file1 中的内容应该被渲染 从基

  • 反编译的 DLL - 有助于判断它是 C# 还是 VB.NET 的线索？

    当使用DotPeek之类的东西反编译DLL时 我如何判断它最初是用VB Net还是C 编码的 我认为没有简单的方法可以判断 但在某些反编译的代码中可能存在明显的迹象 即线索 您可以查找参考Microsoft VisualBasic图书馆 如

  • 高度大于屏幕高度的 Flutter 可滚动堆栈

    我有一个小部件层次结构 其中SingleChildScrollView是父母有Stack作为孩子 Stack有两个孩子 如果第二个孩子超出屏幕高度 其高度就会被剪裁 根据文档 堆栈占用的大小根据Non Positioned孩子 所以这意味着

热门标签