ScrollBar 和 SingleChildScrollView 不起作用答案

【问题标题】：ScrollBar and SingleChildScrollView not workingScrollBar 和 SingleChildScrollView 不起作用
【发布时间】：2021-06-27 03:12:26
【问题描述】：

我试图在滚动视图中显示标题和字幕列表，但滚动视图不起作用。我收到此错误：

RenderBox 未布置：RenderRepaintBoundary#d93c1 relayoutBoundary=up4 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
断言失败：第 1940 行第 12 行：'hasSize'

我的 dart 文件的完整代码：

//import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flappy_search_bar/search_bar_style.dart';
import 'package:flutter/material.dart';
import 'body.dart';

class DefinationBody extends StatelessWidget {
  const DefinationBody({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          centerTitle: true,
          leading: Padding(
            padding: EdgeInsets.only(left: 12),
            child: IconButton(
              icon: Icon(Icons.arrow_back, color: Colors.black),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => BusinessBody()),
              ),
            ),
          ),
          title: Text(
            "Definations",
            style: TextStyle(
              color: Colors.orange[900],
            ),
          ),
        ),
        //backgroundColor: Colors.yellow,
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/main_bottom.png"),
              alignment: Alignment.bottomCenter,
              fit: BoxFit.cover,
            ),
          ),
          child: MyCardWidget(),
        ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyCardWidget extends StatelessWidget {
  MyCardWidget({Key key}) : super(key: key);
  //final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Container(
            alignment: Alignment.topCenter,
            child: Padding(
              padding: const EdgeInsets.only(top: 10, left: 50.0),
              child: Column(
                children: [
                  SizedBox(
                    child: Row(
                      children: [
                        Text(
                          'Definations',
                          style: TextStyle(
                            fontFamily: 'Arial',
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                            height: 2,
                          ),
                          textAlign: TextAlign.center,
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10.0),
                          child: Container(
                            margin: EdgeInsets.only(top: 10),
                            height: 3.0,
                            width: 200.0,
                            color: Colors.orange[900],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20.0, left: 20, right: 20),
            child: Container(
                height: 82,
                width: double.infinity,
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.orange[900]),
                    borderRadius: BorderRadius.all(Radius.circular(40))),
                // ignore: missing_required_param
                child: SearchBar(
                  searchBarStyle: SearchBarStyle(
                    backgroundColor: Colors.transparent,
                    padding: EdgeInsets.all(20),
                    borderRadius: BorderRadius.circular(40),
                  ),
                  hintText: "Search",
                  hintStyle: TextStyle(
                    color: Colors.grey[100],
                  ),
                  textStyle: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                )),
          ),
          Container(
            child: new Expanded(
              flex: 1,
            child: Scrollbar(
              isAlwaysShown: true,
                child: SingleChildScrollView(
                    child: ListView(
                      children: [
              ListTile(
                title: Text('this is title'),
                subtitle: Text('this is sub title'),
              ),
              ListTile(
                title: Text('this is title'),
                subtitle: Text('this is sub title'),
              ),
              ListTile(
                title: Text('this is title'),
                subtitle: Text('this is sub title'),
              ),
            ]
            )
            )
            )
      ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter scrollbar singlechildscrollview

【解决方案1】：

使您的列表视图收缩包装：真实并确保滚动物理

shrinkWrap: true,
physics: ScrollPhysics()

【讨论】：

谢谢。你能告诉我如何添加滚动条吗？滚动条不可见。
你应该使用滚动控制器。

【解决方案2】：

你不能做 Expanded+SingleChildScroll 视图，SingleChildScrollView 有无限的高度，所以它不会工作，你需要 SingleChildScrollView 的约束/固定高度，

#编辑

Scrollbar(
                    isAlwaysShown: true,
                    child: ListView(
                        children: List.generate(100, (index) => ListTile(
                          title: Text('this is title'),
                          subtitle: Text('this is sub title'),
                        ))
                    )
                )

【讨论】：

只需删除我在我的电脑上测试过的SingleChilScrollView，它会起作用

【解决方案3】：

我认为你的ListView 和SingleChildScrollView 有冲突。

SingleChildScrollView(
    child: Column(
      children: [
        ListTile(
          title: Text('this is title'),
          subtitle: Text('this is sub title'),
        ),
        ListTile(
          title: Text('this is title'),
          subtitle: Text('this is sub title'),
        ),
        ListTile(
          title: Text('this is title'),
          subtitle: Text('this is sub title'),
        ),
      ],
    ),
  ),

或者你可以设置你的高度

SingleChildScrollView(
    child: SizedBox(
      height: 200,
      child: ListView(
        children: [
          ListTile(
            title: Text('this is title'),
            subtitle: Text('this is sub title'),
          ),
          ListTile(
            title: Text('this is title'),
            subtitle: Text('this is sub title'),
          ),
          ListTile(
            title: Text('this is title'),
            subtitle: Text('this is sub title'),
          ),
        ],
      ),
    ),
  ),

【讨论】：