【问题标题】:Flutter how to dynamically get the height of my page and my Listview.Builder?Flutter 如何动态获取我的页面和我的 Listview.Builder 的高度?
【发布时间】:2020-09-29 17:10:16
【问题描述】:

我想知道如何使用内部的 Listview.Builder()` 动态获取页面的高度。这是我的页面树:

这是我的 News.dart

return SafeArea(
      child: Scrollbar(
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                dragStartBehavior: DragStartBehavior.start,
                child: Container(
                  height: MediaQuery.of(context).size.height * 5,
                  margin: EdgeInsets.all(25),
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Column(
...

稍后我们有Listview.Builder()

Expanded(child: Consumer<Model>(
                          builder: (context, myModel, child) {
                        return ListView.builder(
                          physics: NeverScrollableScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          itemCount: list.length,
                          itemBuilder: (ctx, index) =>
                              ChangeNotifierProvider.value(
                            value: list[index],
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                              },
                              child: Item(),
                            ),
                          ),
                        );
                      })),

现在在我的SingleChildScrollView() 下方,我有一个高度为 MediaQuery.of(context).size.height * 5 的容器,我希望拥有完整的屏幕高度动态。如果我删除高度值,我会收到渲染布局错误,因为没有定义大小的父级。这里的这个页面是 TabbarNavigation 的一部分,这就是内容。

谁能告诉我如何获取ListView.Builder() 的动态高度?

编辑:

以下是我的标签栏,我在其中定义标签栏内的页面。其中之一是我的 News.dart

这是 Tabbar.dart:

final List<Widget> _pages = [
    NewsScreen(),
    TrendScreen(),
    OtherScreen(),
  ];    


    return Scaffold(
      extendBodyBehindAppBar: true,
      body: _pages[provider.currentIndex],
      bottomNavigationBar: provider.currentIndex != 2
          ? Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
              CustomWidget(),
              BottomNavigationBar(
                onTap: _selectPage,
                backgroundColor: Theme.of(context).primaryColor,
                unselectedItemColor: Color.fromRGBO(130, 130, 130, 1),
                selectedItemColor: Color.fromRGBO(236, 37, 105, 1),
                selectedFontSize: 10,
                iconSize: 22,
                currentIndex: provider.currentIndex,
                type: BottomNavigationBarType.fixed,
                selectedLabelStyle: TextStyle(fontSize: 12),
                items: [
                  BottomNavigationBarItem(
                    backgroundColor: Theme.of(context).primaryColor,
                    icon: Icon(Icons.home),
                    title: Text(
                      'home',
                      style: TextStyle(
                        fontSize: 10,
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    backgroundColor: Theme.of(context).primaryColor,
                    icon: Icon(Icons.star),
                    title: Text(
                      'News',
                      style: TextStyle(
                        fontSize: 10,
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    backgroundColor: Theme.of(context).primaryColor,
                    icon: Icon(Icons.play_arrow),
                    title: Text('other',
                        style: TextStyle(
                          fontSize: 10,
                        )),
                  ),
                ],
              ),
            ])
          : null,
    );
  }

【问题讨论】:

  • 我不知道为什么你需要一个SingleChildScrollViewListView 在里面 - 为什么不使用CustomScrollView 并摆脱身高/物理等问题?
  • 你能给我举个例子吗?脚手架、一些元素和列表视图,它们总共高于设备尺寸高度?老实说,我不知道更好的方法,所以是的,给我看看,这样我就可以提高自己:D
  • CustomScrollView(slivers: [SliverToBoxAdapter(...), SliverList(...)])
  • 谢谢你为我做的! @pskink
  • 当然,您可以在小时候使用SliverToBoxAdapterColumn,当然您也可以使用多个SliverToBoxAdapters - 但第一个选项更实用

标签: flutter dart flutter-layout


【解决方案1】:

感谢@pskink !!

使用CustomScrollView() 而不是SingleChildScrollView()SliverToBoxAdapter()SliverList() 让一切都像魅力一样工作!

return SafeArea(
      child: CustomScrollView(
        //scrollDirection: Axis.vertical,
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          // Place sliver widgets here
          SliverToBoxAdapter(
              child: Padding(
                  padding: const EdgeInsets.fromLTRB(25, 30, 25, 20),
                  child: SizedBox(
                    height: 299,
                    child: Column(children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
...

还有一个列表示例:

SliverList(
              delegate: SliverChildBuilderDelegate(
            (ctx, index) => ChangeNotifierProvider.value(
              value: list[index],
              child: GestureDetector(
                onTap: () {}),
childCount: rrr.length,
          )),

【讨论】:

    【解决方案2】:

    您可以使用已使用的Expanded() 小部件的“Flex”属性。 首先移除顶部的 Container。

    return SafeArea(
      child: Scrollbar(
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                dragStartBehavior: DragStartBehavior.start,
                child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Column(
    

    ...

    然后,

    列(

    children: <Widget>[
        Expanded(
           flex : 1,
           child: Consumer<Model>(
               builder: (context, myModel, child) {
                 return ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    scrollDirection: Axis.vertical,
                    itemCount: list.length,
                    itemBuilder: (ctx, index) =>
                        ChangeNotifierProvider.value(
                          value: list[index],
                          child: GestureDetector(
                             onTap: () {
                                setState(() {
                                },
                             child: Item(),
                            ),
                          ),
                       ;
        })),
     ]),
    

    API 文档:https://api.flutter.dev/flutter/widgets/Expanded-class.html

    本周 Flutter 小部件:https://www.youtube.com/watch?v=_rnZaagadyo

    【讨论】:

    • 谢谢你,我们越来越近了,如果 SingleChildScrollView 被删除,你的代码可以让它工作。但我需要滚动页面。我们怎样才能得到这个?我也发布了我的 Tabbar 文件。也许这也很重要。
    • 滚动页面是什么意思?页面是否有更多小部件并且比设备屏幕高?
    • 没错。该页面有更多的小部件并且比设备尺寸的屏幕要高。而且我的 ListViewBuilder 确实有不同的高度,这取决于里面有多少项目。
    猜你喜欢
    • 2019-08-12
    • 1970-01-01
    • 2013-07-29
    • 1970-01-01
    • 2021-02-19
    • 1970-01-01
    • 2021-06-03
    • 2016-05-05
    • 2012-03-19
    相关资源
    最近更新 更多