Question

我为带有图片和详细信息的联系人建立了列表视图，但是页面上没有任何显示。它只是空白。

我尝试了两种方法，但是都呈现空白页面。

import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:convert';

import 'package:homenet/pages/search_page.dart';

class PhoneBook extends StatefulWidget {
  @override
  _PhoneBookState createState() => _PhoneBookState();
}

class _PhoneBookState extends State<PhoneBook> {
  List data;
  Future<String> loadJsonData() async {
    var jsonText = await rootBundle.loadString("data/data.json");
    setState(() {
      data = json.decode(jsonText);
    });
    return 'success';
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      child: ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return SingleContact(
            name: data[index]['name'],
            company: data[index]['company'],
            cell: data[index]['cell'],
            office: data[index]['office'],
            picture: data[index]['picture'],
            email: data[index]['email'],
          );
        },
      ),
    );
  }
}
class SingleContact extends StatelessWidget {
  final name;
  final company;
  final cell;
  final office;
  final picture;
  final email;

  SingleContact({Key key, this.name, this.company, this.cell, this.office, this.picture, this.email});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: new Color(0xFFFA983A),
        title: Image.asset(
          'assets/images/logo_white.png',
          fit: BoxFit.cover,
        ),
        elevation: 0.0,
        centerTitle: true,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => new SearchPage()));
            },
          ),
        ],
      ),
      body: Card(
        elevation: 5,
        margin: EdgeInsets.all(8.0),
        child: Container(
          padding: EdgeInsets.all(12.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    height: 75,
                    width: 75,
                    child: ClipRRect(
                        borderRadius: BorderRadius.circular(50.0),
                        child: Image.asset(picture)),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(name,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0
                        ),),
                      Text(company,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 18.0
                          )),
                      Text(email,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 18.0,
                              color: Color(0xFFFA983A)
                          ))
                    ],
                  ),
                  FloatingActionButton(
                    backgroundColor: Color(0xFFFA983A),
                    mini: true,
                    onPressed: (){},
                    child: Icon(Icons.phone, color: Colors.white,),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是我的代码，由于我不知所措，有人可以帮助您发现问题。数据来自data.json，并且文件中的所有信息均正确。有些信息是重复的，例如“电子邮件”，这会对空白显示产生影响吗？

Answer 1

您不能将Scoffold放在ListView中，您可能应该在_PhoneBookState的构建方法中使用脚手架。如果您真的想在列表视图中使用脚手架，请用指定高度的Container包裹它。

我很难理解您期望的用户界面，也许无法解释您想要在列表中看到的内容。

我的listView只显示一个没有内容的空白页。我该如何解决？

1 个答案: