草庐IT

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

coder 2023-05-09 原文

我有一个小部件层次结构,其中 SingleChildScrollView 是父级,Stack 作为子级,Stack 有两个子级,如果第二个 child 超出屏幕高度,其高度被剪裁。根据文档,堆栈根据 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]: /image/ZnoP0.png

最佳答案

解决方案 #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),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

关于高度大于屏幕高度的 flutter 可滚动堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56204912/

有关高度大于屏幕高度的 flutter 可滚动堆栈的更多相关文章

  1. 屏幕录制为什么没声音?检查这2项,轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题,比如录制的视频没有声音。屏幕录制为什么没声音?今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音,你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音,屏幕录制为什么没声音?如果当时没有打开音频录制,则录制好的视频是没有声音的。因此,建议在录制前进行检查。屏幕上没有声音,很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音,即可录制音频和图画同步视频。操作方法:步骤1:点击电脑屏幕右下侧的“小喇叭”图案,在上方的选项中,选择“声音”。 步骤2:在“声

  2. ruby-on-rails - 如何将大于 5GB 的文件上传到 Amazon S3? - 2

    我目前正在使用带有Carrierwavegem的Rails3.2将文件上传到AmazonS3。现在我需要能够处理用户提交的大于5GB的文件,同时仍然使用Carrierwavegem。Carrierwave或Fog是否有任何其他gem或分支可以处理5GB以上的文件上传到S3?编辑:我不想重写一个完整的Rails上传解决方案,所以像这样的链接没有帮助:https://gist.github.com/908875. 最佳答案 我想出了如何做到这一点,并且现在可以正常工作了。在正确的config/environment文件中,添加以下内容以

  3. ruby - 堆栈级别太深(SystemStackError) - 2

    我有Sinatra应用程序,需要测试我的应用程序。features/support/env.rb:require_relative"../../application"require"capybara"require"capybara/cucumber"require"rspec"WorlddoCapybara.app=ApplicationincludeCapybara::DSLincludeRSpec::Matchersendfeatures/one.feature:Feature:TesthomepageInordertomakesurepeoplecanopenmysiteIw

  4. ruby-on-rails - Rails Asset Pipeline 更好的错误或堆栈跟踪 - 2

    刚刚将应用程序从rails3.0.9升级到3.2.1,当我运行bundleexecrakeassets:precompile时出现错误,这很好,但是回溯没有告诉我在哪里语法问题来self的css或scss文件。我尝试对“0ee5c0e69c92af0”进行greping,但该字符串没有出现在我的项目中。bundleexecrakeassets:precompile:allRAILS_ENV=productionRAILS_GROUPS=assets--trace**Invokeassets:precompile:all(first_time)**Executeassets:precom

  5. python - 保存堆栈? - 2

    我只是好奇,是否可以将程序的所有变量和当前状态转储到一个文件中,然后在另一台计算机上恢复它?!假设我有一个用Python或Ruby编写的小程序,给定特定条件,它会将所有当前变量和当前状态转储到一个文件中。稍后,我可以在另一台机器上再次加载它,然后返回它。类似VM快照功能。我在这里看到过这样的问题,但与Java相关,保存当前的JVM并在不同的JVM中再次运行它。大多数人都说没有那样的东西,只有Terracotta有一些东西,仍然不完美。谢谢。阐明我要实现的目标:给定2个或更多RaspberryPi,我试图在Pinº1上运行我的软件,但是当我需要用它做一些不同的事情时,我需要将软件移动到P

  6. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性:然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量:ANDROID_HOMED:\AndroidSDK2.然后在系统变量:Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量:        变量名:FLUTTER_STORAGE_BASE_URL      变量值:https://storage.flutter-io.cn        变量名:PUB_HOSTED_URL      变量

  7. ruby - Ruby 中的堆栈级别太深 - 2

    classMyClassdefmethod_missing(name,*args)name=name.to_s10.timesdonumber=rand(100)endputs"#{number}and#{name}"endend你好,我正在练习ruby​​,但在这个非递归函数中,我在使用这段代码时遇到堆栈级别太深的错误。x=MyClass.Newx.try 最佳答案 您的代码的问题是times()中定义的number变量超出了method_missing()范围。因此,当该行被执行时,Ruby将其解释为对self的方法调用。在正常

  8. ruby-on-rails - 在服务器端检测屏幕尺寸和像素密度? - 2

    我一直在做一些研究,我想我已经知道答案了,但我想知道是否有任何方法可以在不使用javascript或依赖CSS3媒体的情况下获得设备的屏幕尺寸和像素密度查询。本质上,我正在研究如何获取屏幕分辨率和像素密度,以便服务器可以决定在URI请求中为服务器提供哪个图像。到目前为止,我还没有发现任何证据表明这是可能的,但我想嘿,为什么不问问呢? 最佳答案 我不完全同意上面的正确答案。实际上,这个答案在很多情况下都是正确的……但理论上并非如此。通常向Web服务器发出的请求包含一个User-Agent字段,从理论上讲,该字段可用于识别有关设备屏幕分

  9. ruby-on-rails - 查找具有大于某个关联的 x 的所有对象 - 2

    我有很多农场,每个农场都有很多动物。我需要找到每个拥有5只以上动物的农场。我需要类似这样的东西...:Farm.where(animals.count>5)更新/回答:Farm.joins(:animals).group("farm_id").having("count(farm_id)>5") 最佳答案 尝试:Farm.joins(:animals).group("farm.id").having("count(animals.id)>?",5)引用:https://stackoverflow.com/a/9370734/4297

  10. ruby - Rails 日期比较;日期大于或等于几天前 - 2

    我数据库中的日期如下所示:2012-07-23我正在尝试查看日期是否早于7天前且少于14天前,或者查看日期是否大于14天前,但我没有运气..这是我的代码:defprogress_report_status_check(date)progress_date=date.to_dateseven_days=7.days.ago.to_datefourteen_days=14.days.ago.to_dateifseven_days>(progress_date-7.days.ago.to_date)or(progress_date-14.days.ago.to_date)fourteen_d

随机推荐