FlutterListView.builder在左上角呈現專案

我需要串列視圖構建器來根據 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 之后

uj5u.com熱心網友回復：

對于第一張圖片（在添加 Listview.builder 之前），專案在中心呈現，因為您的Row內部有一個Column，Column & Row有一個默認值CrossAxisAlignment.center

添加 ListView.builder 后，日志將顯示錯誤，ListView此處需要在Expandedor內shrinkWrap: true，將 Expanded 設定為 ListView 的父級將使串列視圖僅可滾動，但添加屬性shrinkWrap: true將停止滾動功能在您的串列視圖中，然后您必須將您的列放在一個Listview或SingleChildScrollView

標籤：扑网络

上一篇：VMware vSphere 8.0 正式版下載

下一篇：如何根據資料庫中的值設定單選按鈕“選中”？-反應