断言失败：tileWidth !=leadingSize.width || tileWidth == 0.0“前导小部件消耗整个图块宽度

Question

我尝试在屏幕上的模板 chatModel() 中显示文本，但遇到渲染问题。

我尝试将列表构建器嵌套在具有特定宽度和高度的大小框中，整个页面停止渲染。我也尝试了shrinkwrap属性，但得到了相同的结果。这是代码

 Widget chatModel(String text) {
    return ListTile(
      contentPadding: EdgeInsets.zero, // Remove default padding
      leading: Container(
        width: 100,
        height: 35,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/ash-logo-red.png'),
            fit: BoxFit.fill,
          ),
        ),
      ),
      title: SizedBox(
        width: MediaQuery.of(context).size.width / 4, // Set width here
        child: Text(
          text,
          style: const TextStyle(color: Colors.black),
        ),
      ),
      trailing: IconButton(
        icon: const Icon(Icons.content_copy),
        onPressed: () {
          // Copy text to clipboard using the 'clipboard' package
          Clipboard.setData(ClipboardData(text: text));
        },
      ),
    );
  }

  // display when there is no text generated
  Widget blankScreen() {
    return const Center(
      child: Text(
        'Inkterpretor',
        style: TextStyle(fontSize: 50, color: Color(0xffD9D9D9)),
      ),
    );
  }

  Widget mainPage() {
    return Builder(
      builder: (BuildContext context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width * 0.6,
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: [
              // chat screen to display users texts
              Column(
                children: [
                  // glare effect
                  //TODO display when there is no text on the screen
                  Padding(
                    padding: const EdgeInsets.only(top: 250.0),
                    child: blankScreen(),
                  ),
                  Center(
                    child: StreamBuilder<List<dynamic>>(
                      stream: _mainStreamController.stream,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          List<dynamic> data = snapshot.data!;

                          return SizedBox(
                            width: 100,
                            child: ListView.builder(
                              shrinkWrap: true,
                              itemCount: data.length,
                              itemBuilder: (context, index) {
                                Map<String, dynamic> item = data[index];

                                return Column(
                                  children: [chatModel(item['content'])],
                                );
                              },
                            ),
                          );
                        } else if (snapshot.hasError) {
                          return Center(
                            child: Text('Error: ${snapshot.error}'),
                          );
                        } else {
                          return const Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                      },
                    ),
                  ),
                  // chatModel(),
                ],
              ),
              Positioned(
                bottom: 0,
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.8,
                  height: 40,
                  color: Colors.white.withOpacity(0.97),
                ),
              ),
              const Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Center(
                    child: Padding(
                      padding: EdgeInsets.only(bottom: 40.0),
                      child: CustomButtonTextField(),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }

Answer 1

从 ListView.Builder 上方删除 SizedBox。我只删除 Sizedbox，它工作正常。

Widget mainPage() {
return Builder(
  builder: (BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.6,
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: [
          // chat screen to display users texts
          Column(
            children: [
              // glare effect
              //TODO display when there is no text on the screen
              Padding(
                padding: const EdgeInsets.only(top: 250.0),
                child: blankScreen(),
              ),
              SizedBox(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: fakeName.length,
                  itemBuilder: (context, index) {
                    var item = fakeName[index];
                    return Column(
                      children: [chatModel(item)],
                    );
                  },
                ),
              ),
              // chatModel(),
            ],
          ),
          Positioned(
            bottom: 0,
            child: Container(
              width: MediaQuery.of(context).size.width * 0.8,
              height: 40,
              color: Colors.white.withOpacity(0.97),
            ),
          ),
        ],
      ),
    );
  },
);

}