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 的父级将使列表视图仅可滚动，但添加属性shrinkWrap: true将停止 Listview 中的滚动功能，然后您必须将 Column 放在Listview或SingleChildScrollView中