如何在颤抖中呈现一个空的视图？

Question

由于Widget.build如何在flutter中呈现空白视图，因此无法返回null来指示没有要渲染的内容。

Answer 1

对于像我这样的人，想知道什么是显示空窗口小部件的“正确方法”-官方材料代码库使用此方法：

Widget build(BuildContext context) {
  return SizedBox.shrink();
}

SizedBox.shrink()是与背景不同Container或Material没有背景或任何装饰的小部件。如果不受父约束的影响，它会将自己的大小调整为可能的最小区域。

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

您也可以简单地返回一个空的Container并避免使用Scaffold完全。但是如果这是您应用程序中唯一的主要小部件，这将导致黑屏color，Container如果您想防止黑色背景，您可以设置 的属性。

例子：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white // This is optional
    );
  }
}

Answer 3

它有很多可能的解决方案。喜欢

1. Widget build(context) => Container();
   

2. Widget build(context) => SizedBox();
   

3. Widget build(context) => Scaffold();
   

Answer 4

这可能为时已晚，但所有这些解决方案都不适合某些场景，例如玩PopupMenuItems或影响 UI 渲染！

\n

空安全更新

\n

  [\n    .\n    .\n    .\n    if(condition)...[//Conditionally widget(s) here\n      Something(...),\n    ],\n    .\n    .\n    .\n],\n

\n

解决方案是在传递给渲染组件之前删除空项：

\n

Column(\n  children: [\n    Text(\'Title\'),\n    name != \'\' \n      ? Text(name) //show name\n      : null // just pass a null we will filter it in next line!\n  ].where((e) => e != null).toList()// Filter list and make it List again!\n)\n

\n

这样，我们可以有很多null，并且UI不会受到任何空的影响Widget。

\n

PopupMenuButton我们无法传递 SizedBox 的示例：

\n

PopupMenuButton(\n    icon: Icon(Icons.add),\n    itemBuilder: (context) => [\n        PopupMenuItem(\n            child: Row(children:[ Icon(Icons.folder), Text(\'So something\')]),\n            value: \'do.something\',\n        ),\n        1 > 2 //\xe2\x9a\xa0\xef\xb8\x8f A false condition\n        ? PopupMenuItem(\n           child: Row(children: [ Icon(Icons.file_upload), Text(\'\xe2\x9a\xa0\xef\xb8\x8fNo way to display \')]),\n            \'no.way.to.display\',\n          )\n        : null,// \xe2\x9a\xa0\xef\xb8\x8f Passing null\n        PopupMenuItem(\n           child: Row(children: [ Icon(Icons.file_upload), Text(\'Do something else\')]),\n            \'do.something.else\',\n        )\n    ].where((e) => e != null).toList(),//\xe2\x84\xb9\xef\xb8\x8f Removing null items  \n    onSelected: (item) {}\n)\n\n

\n

这可以用作 APIextension：

\n

extension NotNulls on List {\n  ///Returns items that are not null, for UI Widgets/PopupMenuItems etc.\n  notNulls() {\n    return where((e) => e != null).toList();\n  }\n}\n\n//Usage:\nPopupMenuButton(\n    icon: Icon(Icons.add),\n    itemBuilder: (context) => [\n        PopupMenuItem(\n            child: Row(children:[ Icon(Icons.folder), Text(\'So something\')]),\n            value: \'do.something\',\n        ),\n        1 > 2 //\xe2\x9a\xa0\xef\xb8\x8f A false condition\n        ? PopupMenuItem(\n           child: Row(children: [ Icon(Icons.file_upload), Text(\'\xe2\x9a\xa0\xef\xb8\x8fNo way to display \')]),\n            \'no.way.to.display\',\n          )\n        : null,// \xe2\x9a\xa0\xef\xb8\x8f Passing null\n        PopupMenuItem(\n           child: Row(children: [ Icon(Icons.file_upload), Text(\'Do something else\')]),\n            \'do.something.else\',\n        )\n    ].notNulls(),//\xe2\x84\xb9\xef\xb8\x8f Removing null items  \n    onSelected: (item) {}\n)\n\n\n

\n

Answer 5

当构建函数返回 null 时，flutter 的错误消息是：

构建函数绝不能返回 null。要返回导致建筑小部件填充可用空间的空白空间，请返回“new Container()”。要返回占用尽可能少空间的空白空间，请返回“新容器（宽度：0.0，高度：0.0）”。

Answer 6

表现

容器 = 166,173 毫秒

SizedBox.shrink = 164,523 毫秒

DIY

main() async {
  testWidgets('test', (WidgetTester tester) async {
    await tester.pumpWidget( Container());
    final Stopwatch timer = new Stopwatch()..start();
    for (int index = 0; index < 5000000; index += 1) {
      await tester.pump();
    }
    timer.stop();
    debugPrint('Time taken: ${timer.elapsedMilliseconds}ms');
  });
}

Answer 7

建议不显示任何内容的小部件是使用SizedBox。

SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: Text('Hello World!')),
)