{"id":98,"date":"2026-09-01T01:24:35","date_gmt":"2026-08-31T17:24:35","guid":{"rendered":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/01\/interview-flutter-questions\/"},"modified":"2026-09-06T01:30:14","modified_gmt":"2026-09-05T17:30:14","slug":"interview-flutter-questions","status":"publish","type":"post","link":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/01\/interview-flutter-questions\/","title":{"rendered":"Flutter \u9762\u8bd5 20 \u95ee\uff1a\u6e32\u67d3\u7ba1\u7ebf\u3001\u72b6\u6001\u7ba1\u7406\u4e0e\u6027\u80fd\u4f18\u5316"},"content":{"rendered":"
\n
\u5173\u952e\u8bcd<\/span>Flutter\u3001\u4e09\u68f5\u6811\u3001Widget\u3001Element\u3001RenderObject\u3001\u72b6\u6001\u7ba1\u7406\u3001Isolate<\/div>\n
\n
\u76ee\u5f55<\/div>\n
    \n
  1. \u4e00\u3001\u6e32\u67d3\u7ba1\u7ebf\uff1a\u4e00\u5207\u7684\u8d77\u70b9<\/a><\/li>\n
  2. \u4e8c\u3001\u72b6\u6001\u7ba1\u7406\uff1a\u9009\u578b\u9898<\/a><\/li>\n
  3. \u4e09\u3001\u6027\u80fd\uff1a\u9762\u8bd5\u5b98\u6700\u7231\u8ffd\u95ee\u7684\u90e8\u5206<\/a><\/li>\n
  4. \u56db\u3001\u5de5\u7a0b\u4e0e\u6df7\u5408\u5f00\u53d1<\/a><\/li>\n
  5. \u4e94\u3001\u7b54\u9898\u7b56\u7565<\/a><\/li>\n
  6. \u516d\u3001\u5c0f\u7ed3<\/a><\/li>\n<\/ol>\n<\/div>\n

    Flutter \u9762\u8bd5\u6709\u6781\u5f3a\u7684\u6280\u672f\u7279\u5f81\uff1a\u53ea\u8981\u4f60\u6ca1\u771f\u6b63\u7406\u89e3\u6e32\u67d3\u7ba1\u7ebf\uff0c\u540e\u9762\u7684\u72b6\u6001\u7ba1\u7406\u3001\u6027\u80fd\u4f18\u5316\u9898\u57fa\u672c\u7b54\u4e0d\u5230\u70b9\u5b50\u4e0a<\/strong>\u3002\u56e0\u4e3a\u51e0\u4e4e\u6240\u6709\u8bbe\u8ba1\u51b3\u7b56\uff0c\u90fd\u80fd\u4ece”\u4e09\u68f5\u6811 + \u81ea\u7ed8”\u8fd9\u4e2a\u6839\u4e0a\u63a8\u5bfc\u51fa\u6765\u3002<\/p>\n

    \u672c\u6587\u6309”\u6e32\u67d3\u7ba1\u7ebf \u2192 \u72b6\u6001\u7ba1\u7406 \u2192 \u6027\u80fd \u2192 \u5de5\u7a0b”\u56db\u5c42\uff0c\u6574\u7406 20 \u4e2a\u9ad8\u9891\u8003\u70b9\u3002<\/p>\n

    \u4e00\u3001\u6e32\u67d3\u7ba1\u7ebf\uff1a\u4e00\u5207\u7684\u8d77\u70b9<\/h2>\n
    \"Flutter
    Flutter \u4e09\u68f5\u6811\uff1aWidget \u914d\u7f6e\u3001Element \u5b9e\u4f8b\u3001RenderObject \u6e32\u67d3<\/figcaption><\/figure>\n

    Q1\uff1aFlutter \u7684\u4e09\u68f5\u6811\u662f\u4ec0\u4e48\uff1f\u5404\u81ea\u7684\u4f5c\u7528\uff1f<\/strong><\/p>\n

      \n
    • Widget \u6811<\/strong>\uff1a\u914d\u7f6e\u4fe1\u606f\uff0c\u4e0d\u53ef\u53d8\u3001\u6781\u5176\u8f7b\u91cf<\/strong>\uff0c\u91cd\u5efa\u6210\u672c\u6781\u4f4e\uff1b<\/li>\n
    • Element \u6811<\/strong>\uff1a\u771f\u6b63\u7684”\u5b9e\u4f8b”\uff0c\u8d1f\u8d23\u6301\u6709\u72b6\u6001\u3001\u7ba1\u7406\u7236\u5b50\u5173\u7cfb\u3001\u505a diff<\/strong>\uff0c\u662f\u8fde\u63a5 Widget \u4e0e RenderObject \u7684\u6865\u6881\uff1b<\/li>\n
    • RenderObject \u6811<\/strong>\uff1a\u8d1f\u8d23\u5e03\u5c40\uff08layout\uff09\u3001\u7ed8\u5236\uff08paint\uff09\u3001\u547d\u4e2d\u6d4b\u8bd5<\/strong>\uff0c\u662f\u771f\u6b63\u5e72\u91cd\u6d3b\u7684\u4e00\u5c42\u3002<\/li>\n<\/ul>\n
      \n

      \u8ffd\u95ee\u9677\u9631\uff1a<\/strong>“Widget \u91cd\u5efa\u662f\u4e0d\u662f\u5f88\u8d35\uff1f”
      \n\u4e0d\u662f\u3002Widget \u662f\u4e0d\u53ef\u53d8\u7684\u914d\u7f6e\u5bf9\u8c61\uff0c\u91cd\u5efa\u53ea\u662f\u521b\u5efa\u65b0\u5bf9\u8c61<\/strong>\uff0c\u4ee3\u4ef7\u6781\u5c0f\u3002\u771f\u6b63\u8d35\u7684\u662f Element \u4e0e RenderObject \u7684\u91cd\u5efa\u3002Flutter \u901a\u8fc7 Element \u7684 diff\uff08\u6bd4\u8f83 runtimeType \u4e0e key\uff09\u6765\u51b3\u5b9a\u662f\u590d\u7528\u8fd8\u662f\u91cd\u5efa\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48”\u9891\u7e41 build \u4e0d\u6162\uff0c\u4f46\u8ba9 Element \u6811\u5927\u9762\u79ef\u91cd\u5efa\u4f1a\u5f88\u6162”\u3002<\/strong><\/p>\n<\/blockquote>\n

      Q2\uff1aFlutter \u4e3a\u4ec0\u4e48\u80fd\u505a\u5230\u8de8\u5e73\u53f0 UI \u4e00\u81f4\uff1f<\/strong>
      \n\u56e0\u4e3a\u5b83\u4e0d\u4f9d\u8d56\u7cfb\u7edf\u539f\u751f\u63a7\u4ef6\uff0c\u800c\u662f\u81ea\u5e26\u6e32\u67d3\u5f15\u64ce\u76f4\u63a5\u7ed8\u5236<\/strong>\uff08Skia\/Impeller\uff09\u3002UI \u7531 Flutter \u81ea\u5df1\u753b\uff0c\u6240\u4ee5\u4e24\u7aef\u8868\u73b0\u5b8c\u5168\u4e00\u81f4\u3002\u4ee3\u4ef7\u662f\u5305\u4f53\u79ef\u66f4\u5927\uff0c\u4e0e\u539f\u751f\u63a7\u4ef6\u6df7\u6392\u9700\u8981\u5e73\u53f0\u901a\u9053\u3002<\/p>\n

      Q3\uff1asetState<\/code> \u4e4b\u540e\u53d1\u751f\u4e86\u4ec0\u4e48\uff1f<\/strong>
      \n\u6807\u8bb0\u5bf9\u5e94 Element \u4e3a dirty \u2192 \u4e0b\u4e00\u5e27\u56de\u8c03\u65f6\u91cd\u5efa Widget \u2192 Element diff \u2192 \u9700\u8981\u66f4\u65b0\u7684 RenderObject \u91cd\u65b0 layout\/paint \u2192 \u5408\u6210\u4e0a\u5c4f\u3002\u6ce8\u610f setState<\/code> \u662f\u540c\u6b65\u8c03\u7528\uff0c\u4f46\u91cd\u5efa\u53d1\u751f\u5728\u4e0b\u4e00\u5e27\u3002<\/strong><\/p>\n

      Q4\uff1aKey \u6709\u4ec0\u4e48\u7528\uff1f\u4ec0\u4e48\u65f6\u5019\u5fc5\u987b\u7528\uff1f<\/strong>
      \nKey \u51b3\u5b9a Element \u4e0e Widget \u7684\u5339\u914d\u7b56\u7565\u3002\u5f53\u540c\u7c7b\u578b Widget \u5728\u5217\u8868\u4e2d\u4f4d\u7f6e\u4f1a\u53d8\u5316<\/strong>\uff08\u5982\u5220\u9664\u4e2d\u95f4\u9879\u3001\u91cd\u6392\u5e8f\uff09\u65f6\uff0c\u5fc5\u987b\u7528 Key\uff0c\u5426\u5219 Flutter \u4f1a\u9519\u8bef\u590d\u7528 Element\uff0c\u5bfc\u81f4\u72b6\u6001\u4e32\u4f4d<\/strong>\uff08\u4f8b\u5982\u8f93\u5165\u6846\u5185\u5bb9\u9519\u4f4d\uff09\u3002<\/p>\n

      \u4e8c\u3001\u72b6\u6001\u7ba1\u7406\uff1a\u9009\u578b\u9898<\/h2>\n

      Q5\uff1aStatelessWidget \u548c StatefulWidget \u7684\u533a\u522b\uff1f<\/strong>
      \n\u524d\u8005\u65e0\u53ef\u53d8\u72b6\u6001\uff0cbuild \u53ea\u4f9d\u8d56\u5916\u90e8\u4f20\u5165\u7684\u914d\u7f6e\uff1b\u540e\u8005\u901a\u8fc7 State \u5bf9\u8c61\u6301\u6709\u53ef\u53d8\u72b6\u6001\uff0cState \u7684\u751f\u547d\u5468\u671f\u72ec\u7acb\u4e8e Widget\uff08Widget \u91cd\u5efa\u65f6 State \u53ef\u590d\u7528\uff09\u3002<\/p>\n

      Q6\uff1a\u4e3b\u6d41\u72b6\u6001\u7ba1\u7406\u65b9\u6848\u600e\u4e48\u9009\uff1f<\/strong><\/p>\n

      \n\n\n\n\n\n\n\n\n\n
      \u65b9\u6848<\/th>\n\u7279\u70b9<\/th>\n\u9002\u7528<\/th>\n<\/tr>\n<\/thead>\n
      setState<\/td>\n\u6700\u7b80\u5355\uff0c\u91cd\u5efa\u8303\u56f4\u5927<\/td>\n\u5c40\u90e8\u3001\u7b80\u5355\u7684\u9875\u9762\u5185\u72b6\u6001<\/td>\n<\/tr>\n
      InheritedWidget<\/td>\n\u5e95\u5c42\u673a\u5236\uff0c\u53ef\u8de8\u5c42\u5171\u4eab<\/td>\n\u7406\u89e3\u539f\u7406\u7528\uff0c\u4e1a\u52a1\u5c11\u76f4\u63a5\u7528<\/td>\n<\/tr>\n
      Provider \/ Riverpod<\/td>\n\u57fa\u4e8e InheritedWidget \u5c01\u88c5\uff0c\u53ef\u7cbe\u7ec6\u5237\u65b0<\/td>\n\u4e2d\u5c0f\u578b\u5e94\u7528\u9996\u9009<\/td>\n<\/tr>\n
      Bloc \/ Cubit<\/td>\n\u4e8b\u4ef6\u9a71\u52a8\uff0c\u72b6\u6001\u6d41\u8f6c\u6e05\u6670\uff0c\u53ef\u6d4b\u8bd5\u6027\u5f3a<\/td>\n\u4e2d\u5927\u578b\u3001\u4e1a\u52a1\u903b\u8f91\u590d\u6742<\/td>\n<\/tr>\n
      GetX<\/td>\n\u4e0a\u624b\u5feb\uff0c\u529f\u80fd\u5168\uff08\u8def\u7531\/\u4f9d\u8d56\u6ce8\u5165\uff09<\/td>\n\u8ffd\u6c42\u5f00\u53d1\u901f\u5ea6\uff0c\u6ce8\u610f\u89c4\u8303\u7ea6\u675f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
      \n

      \u52a0\u5206\u7b54\u6cd5\uff1a<\/strong>\u4e0d\u8981\u8bf4”\u54ea\u4e2a\u6700\u597d”\uff0c\u800c\u8981\u8bf4”\u6309\u56e2\u961f\u89c4\u6a21\u4e0e\u4e1a\u52a1\u590d\u6742\u5ea6\u9009\uff0c\u5173\u952e\u662f\u5237\u65b0\u8303\u56f4\u8981\u53ef\u63a7<\/strong>“\u3002\u518d\u8865\u4e00\u53e5”\u65e0\u8bba\u7528\u54ea\u4e2a\uff0c\u90fd\u5e94\u907f\u514d\u8ba9\u6574\u68f5\u6811\u91cd\u5efa”\u3002<\/p>\n<\/blockquote>\n

      Q7\uff1a\u5982\u4f55\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u5efa\uff1f<\/strong>
      \n\u4e09\u5c42\u624b\u6bb5\uff1a\u2460 \u62c6\u5206 Widget\uff0c\u628a\u53d8\u5316\u8303\u56f4\u7f29\u5c0f\u5230\u6700\u5c0f\u5b50\u6811\uff1b\u2461 \u4f7f\u7528 const<\/code> \u6784\u9020\u51fd\u6570\uff0c\u8ba9\u5e38\u91cf Widget \u7f16\u8bd1\u671f\u590d\u7528\uff1b\u2462 \u7528\u72b6\u6001\u7ba1\u7406\u65b9\u6848\u7684\u9009\u62e9\u6027\u91cd\u5efa\u80fd\u529b<\/strong>\uff08\u5982 Selector<\/code>\u3001Consumer<\/code>\uff09\u3002<\/p>\n

      \/\/ \u53cd\u4f8b\uff1a\u6574\u4e2a\u9875\u9762 build \u4f9d\u8d56 count\uff0c\u8d2d\u7269\u8f66\u5217\u8868\u966a\u8dd1\u91cd\u5efa\nConsumer<CartModel>(builder: (_, cart, __) => WholePage(cart));\n\n\/\/ \u6b63\u4f8b\uff1aSelector \u628a\u91cd\u5efa\u8303\u56f4\u6536\u655b\u5230\u771f\u6b63\u4f9d\u8d56\u8be5\u72b6\u6001\u7684\u5b50\u6811\nSelector<CartModel, int>(\n  selector: (_, cart) => cart.itemCount,        \/\/ \u53ea\u8ba2\u9605\u8ba1\u6570\n  builder: (_, count, __) => Badge(child: Text(\"$count\")),\n);\n\/\/ \u9759\u6001\u90e8\u5206\u5c3d\u91cf const \u5316\uff0cdiff \u65f6\u76f4\u63a5\u8df3\u8fc7\nconst HeaderBar(title: Text(\"\u8d2d\u7269\u8f66\"));<\/code><\/pre>\n
      \u4e09\u3001\u6027\u80fd\uff1a\u9762\u8bd5\u5b98\u6700\u7231\u8ffd\u95ee\u7684\u90e8\u5206<\/h2>\n
      Q8\uff1aFlutter \u5361\u987f\u7684\u5e38\u89c1\u539f\u56e0\uff1f<\/strong><\/p>\n