嵌套滚动视图的主体溢出 - 颤动

Question

我制作了一个页面NestedScrollView，其主体NestedScrollView是一个容器，用于保存以前请求的数据。但身体NestedScrollView已经溢出了。下面的代码：

NestedScrollView(
          controller: _scrollViewController,
          headerSliverBuilder:
              (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: new Text(
                  nama,
                  style: TextStyle(color: putih),
                ),
                iconTheme: IconThemeData(color: putih),
                backgroundColor: colorPrimaryDark,
              )
            ];
          },
          body: Container(
            child: Column(
              children: <Widget>[
                Container(
                  color: goldtua,
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Text(
                          string.harga,
                          style: TextStyle(color: putih, fontSize: 24.0),
                        ),
                        Text(
                          formatingRupiah(harga),
                          style: TextStyle(color: putih, fontSize: 24.0),
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              string.fasilitas,
                              style: TextStyle(fontSize: 18.0),
                            ),
                            Expanded(
                              child: Text(
                                fasilitas, //this is the result of the request, the text is multiline so it takes up less space
                                style: TextStyle(fontSize: 18.0),
                              ),
                            )
                          ],
                        ),
                        ......

请问，有人可以告诉我哪里做错了吗？

Answer 1

如果你想或者需要继续使用NestedScrollView，你可以使用ListView代替Column to ListView，就像这样：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: Text('My large title'),
            )
          ];
        },
        body: ListView( // This is the right way
          children: [
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
          ],
        ),
      ),
    );
  }
}

您将看到这样的屏幕。

请注意，如果仅将 ListView 更改为列，您将得到以下结果：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: Text('My large title'),
            )
          ];
        },
        body: Column( // I changed here from ListView and Column and I will get an overflow error
          children: [
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
            Text("List item", style: TextStyle(fontSize: 96)),
          ],
        ),
      ),
    );
  }
}