flutter ListView在TabBar在Column在SingleChildScrollView

yk9xbfzb 于 2023-06-24 发布在 Flutter

关注(0)|答案(3)|浏览(193)

以下代码不起作用，

class _DetailState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Column(children: <Widget>[
        SizedBox(
          height: MediaQuery.of(context).padding.top,
        ),
        Text(
          "My Text 1",
          style: TextStyle(fontSize: 32),
        ),
        Expanded(
            child: ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: 200,
          itemBuilder: (BuildContext context, int index) {
            return Card(child: Text('Some content: ${index + 1}'));
          },
        ))
      ])),
    );
  }
}

我得到的异常为A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout.
如果我删除SingleChildScrollView然后它的工作，但我需要滚动整个，而不是只有列表视图，我想禁用ListView的滚动，并希望只使用SingleChildScrollView的滚动

更新1如下面代码使用tabbar时，

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).padding.top,
          ),
          Text(
            "Detail Screen",
            textAlign: TextAlign.left,
            style: AppTheme.title,
          ),
          Expanded(
            child: SingleChildScrollView(
                child: Column(children: <Widget>[
              Padding(
                padding: EdgeInsets.all(4),
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Container(
                    height: 200,
                    width: 300,
                    margin: EdgeInsets.only(
                        top: 10, bottom: 10, right: 10, left: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                              'https://c.ndtvimg.com/2021-02/knlqli88_perseverancemarspicsafp_625x300_20_February_21.jpg')),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 5,
                          offset: Offset(5, 5),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(6, 0, 0, 4),
                child: Text(
                  "RELATED ITEMS",
                  style: AppTheme.title,
                ),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(6, 0, 0, 4),
                child: TabBar(
                  unselectedLabelColor: Colors.black,
                  labelColor: Colors.red,
                  tabs: [
                    Tab(
                      text: 'TAB 1',
                    ),
                    Tab(
                      text: 'TAB 2',
                    ),
                    Tab(
                      text: 'TAB 3',
                    ),
                    Tab(
                      text: 'TAB 4',
                    )
                  ],
                  controller: _tabController,
                  indicatorSize: TabBarIndicatorSize.label,
                ),
              ),
              Padding(
                  padding: EdgeInsets.fromLTRB(6, 0, 0, 4),
                  child: TabBarView(
                    children: [
                      ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        //primary: false,
                        shrinkWrap: true,
                        itemCount: 200,
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                              child: Text('Some content: ${index + 1}'));
                        },
                      ),
                      ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        //primary: false,
                        shrinkWrap: true,
                        itemCount: 200,
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                              child: Text('Some content: ${index + 1}'));
                        },
                      ),
                      ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        //primary: false,
                        shrinkWrap: true,
                        itemCount: 200,
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                              child: Text('Some content: ${index + 1}'));
                        },
                      ),
                      ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        //primary: false,
                        shrinkWrap: true,
                        itemCount: 200,
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                              child: Text('Some content: ${index + 1}'));
                        },
                      )
                    ],
                    controller: _tabController,
                  )),
              ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                //primary: false,
                shrinkWrap: true,
                itemCount: 200,
                itemBuilder: (BuildContext context, int index) {
                  return Card(child: Text('Some content: ${index + 1}'));
                },
              )
            ])),
          )
        ],
      ),
    );
  }

我得到的异常为The method 'toStringAsFixed' was called on null.

flutter

来源：https://stackoverflow.com/questions/66294925/listview-inside-tabbar-inside-column-inside-singlechildscrollview

3条答案

按热度按时间

gab6jxml1#

复制并粘贴下面的代码：

body: SingleChildScrollView(
    child: SizedBox(
      height: MediaQuery.of(context).size.height,
      child: Column(children: <Widget>[
    SizedBox(
      height: MediaQuery.of(context).padding.top,
    ),
    SizedBox(
      height: 17,
      child: Text(
      "My Text 1",
    ),
    ),
    Expanded(
        child: ListView.builder(
      itemCount: 200,
      itemBuilder: (BuildContext context, int index) {
        return Card(child: Text('Some content: ${index + 1}'));
      },
    ))
  ]),
    )
  )

赞(0）回复(0）举报 2023-06-24

ljsrvy3e2#

只需使用Container Package Column并定义height + width即可避免Error。在下面的例子中，我一直在使用CustomScrollView，但从技术上讲，它也可以与SingleChildScrollView一起使用！

import 'package:flutter/material.dart';

class SliverExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Column(
                children: [
                  Text('My Text 1'),
                  Expanded(
                    child: ListView(
                      children: [
                        Text('1'),
                        Text('2'),
                        Text('3'),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

赞(0）回复(0）举报 2023-06-24

368yc8dk3#

我使用NestedScrollView修复了它，它可以更有效地管理滚动，特别是如果你想使用TabBarView。
试试这个方法：

class MyTabbedPage extends StatelessWidget {
      const MyTabbedPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Provides a TabController for TabBar and TabBarView
    return DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          // The flexible app bar with the tabs
          SliverAppBar(
            title: const Text('App Bar'),
            expandedHeight: 200,
            pinned: true,
            forceElevated: innerBoxIsScrolled,
            bottom: const TabBar(tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ]),
          )
        ],
        // The content of each tab
        body: TabBarView(
          children: [
            ListView.builder(
              itemBuilder: (context, index) => ListTile(
                title: Text(
                  'Tab 1 content $index',
                ),
              ),
            ),
            ListView.builder(
              itemBuilder: (context, index) => ListTile(
                title: Text(
                  'Tab 2 content $index',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

欲了解更多信息，请阅读这篇文章。

赞(0）回复(0）举报 2023-06-24

我来回答

flutter ListView在TabBar在Column在SingleChildScrollView

3条答案

相关问题

热门标签

最新问答