Flutter ListView.builder在左上角渲染项目

Question

我需要列表视图生成器根据firebase中的文档数量生成瓦片，目前我只是在尝试对UI进行排序。我不明白它为什么坏了。图1是ListView.buidler被注释掉的时候。图像2正在离开中的ListView。

列表项

import 'package:flutter/material.dart';
import 'package:track/src/widgets/admin_navbar.dart' as widgets;
import 'package:track/src/widgets/colour_icon_button.dart' as widgets;
import 'package:track/src/features/clients/domain/client_firebase_storage.dart';

class ClientsPage extends StatefulWidget {
const ClientsPage({Key? key}) : super(key: key);
@override
State<ClientsPage> createState() => _ClientsPageState();
}
class _ClientsPageState extends State<ClientsPage> {
late final ClientFirebaseStorage _clientsService;
late double screenWidth;
late double screenHeight;
@override
void initState() {
_clientsService = ClientFirebaseStorage();
super.initState();
}
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: const FlutterLogo(),
),
drawer: const widgets.AdminNavBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Clients',
style: Theme.of(context).textTheme.headline1,
),
const SizedBox(
width: 30,
),
const widgets.ColourIconButton(icon: Icon(Icons.search_rounded)),
const SizedBox(
width: 5,
),
const widgets.ColourIconButton(
icon: Icon(Icons.swap_vert_rounded),
),
SizedBox(
width: screenWidth - 350,
),
const widgets.ColourIconButton(
icon: Icon(Icons.add),
),
],
),
SizedBox(
height: 190,
),
Text('Test1'),
Text('Test2'),
Text('Test3'),
ListView.builder(
itemBuilder: (context, index) {
return ListTile(
onTap: () {},
title: Text('#'),
);
},
)
// StreamBuilder(
//   stream: _clientsService.allClients(),
//   builder: (context, snapshot) {
//     switch (snapshot.connectionState) {
//       case ConnectionState.waiting:
//       case ConnectionState.active: //implicit fall through
//         if (snapshot.hasData) {
//           final allClients = snapshot.data as Iterable<Client>;
//           return ClientsListView(
//             clients: allClients,
//             onTap: (clients) {},
//           );
//         } else {
//           return const CircularProgressIndicator();
//         }
//       default:
//         return const CircularProgressIndicator();
//     }
//   },
// ),
],
),
);
}
}

添加List.viewbuilder之前添加list.viewbuilder 后

Answer 1

对于第一张图片(在添加Listview.builder之前(，由于Column中有一个Row，Column & Row有一个默认的CrossAxisAlignment.center

添加ListView.builder后，日志将显示一个错误，这里的ListView需要在Expanded或shrinkWrap: true中，将Expanded设置为ListView的父级将使ListView仅可滚动，但添加属性shrinkWrap: true将停止ListView中的滚动功能，然后您必须将Column放入Listview或SingleChildScrollView中