Flutter：使用 ListView 时未布置 RenderBox

Question

我正在尝试向 Listviews 显示，一个是水平的，另一个是垂直的。水平的正在工作，但垂直的 Listview 显示此错误“RenderBox 未布局”。

我已经在 stackoverflow 上阅读了有关此错误的其他一些答案，但仍然无法使其正常工作。

当我运行它时，我收到此错误“RenderBox 未布局：RenderRepaintBoundary#6bd44relayoutBoundary=up14 NEEDS-PAINT 'package:flutter/src/rendering/box.dart'：”

import 'package:flutter/material.dart';
import 'package:appone/screens/detail.dart';
import 'package:http/http.dart' as http;
import 'package:appone/screens/main_drawer.dart';
import 'dart:convert';
import 'package:appone/screens/wp-api.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Teds Pharma',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Teds Pharma'),
        ),
        drawer: MainDrawer(),

        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left: 22.0, right: 22, top: 40),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Container(
                  width: double.infinity,
                  height: 60,
                  margin: EdgeInsets.symmetric(horizontal: 0),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(.12),
                            offset: Offset(0, 10),
                            blurRadius: 30)
                      ]),
                  child: Center(
                    child: Padding(
                      padding: EdgeInsets.only(left: 18, right: 12),
                      child: TextField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Search...",
                            hintStyle: TextStyle(fontSize: 30),
                            suffixIcon: Icon(Icons.search)),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 18.0, bottom: 18),
                  child: Container(
                    height: 180,
                    child: FutureBuilder(
                        future: fetchfiveWpPosts(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return ListView.builder(
                                itemCount: snapshot.data.length,
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (BuildContext context, int index) {
                                  Map wppost = snapshot.data[index];
                                  var imageurl =
                                      wppost['acf']['store_logo']['url'];
                                  return GestureDetector(
                                    onTap: () {
                                      Navigator.of(context).push(
                                          MaterialPageRoute(
                                              builder: (_) => Detail()));
                                    },
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Container(
                                        width: 120,
                                        height: 160,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(16),
                                        ),
                                        child: ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          child: FadeInImage.assetNetwork(
                                              placeholder: 'assets/bg.jpg',                                            
                                              image: imageurl,
                                              fit: BoxFit.cover,),
                                        ),
                                      ),
                                    ),
                                  );
                                });
                          }
                          return Center(child: CircularProgressIndicator());
                        }),

                  ),

                ),
              Padding(padding: const EdgeInsets.only(top: 18.0, bottom: 18),
                child: Container(
        child: FutureBuilder(
          future: fetchfiveWpPosts(),
          builder: (context,snapshot){
            if(snapshot.hasData){
              return ListView.builder(
                itemCount: snapshot.data.length,
                scrollDirection: Axis.vertical,
                itemBuilder: (BuildContext context, int index){
                  Map wppost = snapshot.data[index];
                  var imageurl = wppost['acf']['store_logo']['url'];
                return Card(

                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //Image.network(imageurl),

                      FadeInImage.assetNetwork(placeholder: 'assets/loading.gif', image: imageurl),

                      Text(wppost['title']['rendered']),
                    ],
                  ),
                );
                }, 
              );
            }
            return CircularProgressIndicator();
          },
        ),

      ),
              ),
                SizedBox(
                  height: 30,
                )
              ],
            ),
          ),
        ));
  }
}

Answer 1

当您尝试将 Scrollable 小部件放入无限高度小部件或将无限高度 ( Column) 小部件放入可滚动 ( SingleChildScrollView, ListView)时，经常会发生这种情况。

这意味着您正在尝试使用SingleChildScrollView> Column> ListView>Column

您应该添加以下属性到Column一个ListView

Widget build(BuildContext context) {
    return SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min, // Use children total size
    children: [
      ListView.builder(
      itemCount : 10,
        shrinkWrap: true, // Use  children total size                
        itemBuilder : (a, b)=>Text("ffffffffffff")     
      )
    ],
    ),); 
  }