Listview崩溃应用程序抖动

Question

当我从列表视图小部件或应用程序中注释一行时，它可以工作，但当我取消注释时，它根本不出现...

它是一个listview来呈现您通过api收到的通知列表，api与未来的构建器一起正常工作，但是当我添加listBuilder时，它停止工作……

代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:mais_mob/src/shared/models/notifications_model.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:transparent_image/transparent_image.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  String _search;
  int _page = 0;
  Future<List<NotificationModel>> _getGifs() async {
    http.Response response;

    response = await http.get(
        "http://127.0.0.1:8001/api/v1/notifications/get/f331dfd0-cae4-410d-9700-b9ec72c48d7c");
    List myModels;
    myModels = (json.decode(response.body) as List)
        .map((i) => NotificationModel.fromJson(i))
        .toList();

    return myModels;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: _future());
  }

  _future() {
    return FutureBuilder(
        future: _getGifs(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.start,
                // crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                        width: double.infinity,
                        height: 280.0,
                        decoration: BoxDecoration(
                            color: Color.fromRGBO(162, 56, 0, 1),
                            borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(30.0),
                                bottomRight: Radius.circular(30.0))),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 60.0, left: 20.0),
                        child: InkWell(
                            onTap: () {
                              Navigator.of(context).pop();
                            },
                            child: Icon(
                              Icons.arrow_back,
                              color: Colors.white,
                            )),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 150.0),
                        child: Center(
                          child: Container(
                            height: 200.0,
                            width: 310.0,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20.0)),
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12.withOpacity(0.1)),
                                ]),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.only(top: 20.0),
                                  child: Container(
                                    height: 100.0,
                                    width: 100.0,
                                    decoration: BoxDecoration(
                                        image: DecorationImage(
                                            image: AssetImage(
                                                "assets/image/profile/profile3.jpg"),
                                            fit: BoxFit.cover),
                                        color: Colors.white,
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(50.0),
                                        ),
                                        boxShadow: [
                                          BoxShadow(
                                              color: Colors.black12
                                                  .withOpacity(0.2),
                                              blurRadius: 10.0,
                                              spreadRadius: 2.0)
                                        ]),
                                  ),
                                ),
                                SizedBox(
                                  height: 5.0,
                                ),
                                Text(
                                  "user['name']",
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontFamily: "Sofia",
                                      fontWeight: FontWeight.w700,
                                      fontSize: 20.0),
                                ),
                                Text(
                                  "user['email']",
                                  style: TextStyle(
                                      color: Colors.black38,
                                      fontFamily: "Sofia",
                                      fontWeight: FontWeight.w300,
                                      fontSize: 16.0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 25.0, top: 40.0, bottom: 10.0),
                    child: Text(
                      "Notificações",
                      style: TextStyle(
                          fontFamily: "Sofia",
                          fontWeight: FontWeight.w700,
                          fontSize: 16.0),
                    ),
                  ),
                  // ListView.builder(
                  //     itemCount: 1,
                  //     itemBuilder: (context, index) {
                  //       return ListTile(
                  //         title: Text(snapshot.data[index].id),
                  //         subtitle: Text('x'),
                  //       );
                  //     }),
                  SizedBox(
                    height: 20.0,
                  )
                ],
              ),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        });
  }
}

日志终端

Answer 1

当试图在列中嵌套Listview或ListView.builder时，会发生这种情况。

可以使用扩展将列表视图或ListView.builder。

Expanded( 
    child: ListView()
)

或

您可以使用SizedBox将Listview或ListView.builder，并为SizedBox的“高度”参数设置一个值。高度将是固定的。

SizedBox(
    height: 150,
    child: ListView()
)

或

您可以将true设置为ListView的收缩包装属性。

ListView(
    shrinkWrap: true
)

Answer 2

您尚未提供引发此错误的高度。要么按照 @Random Guru 的建议将其包装在容器中，要么将其添加为扩展的子项。

Expanded(
 child:ListView.Builder(...)
)

Answer 3

由于没有提供ListView，因此出现错误。建筑高度。您可以通过将ListView包装在Container中来解决这个问题，并给Container一个height和width属性。

检查下面的代码，它工作得很好:

Container(
      // give it your desired height here
      height: 500,
      // give it your desired height here
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        itemCount: 1,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index].id),
            subtitle: Text('x'),
          );
        },
      ),
    );

我希望这有帮助。