{"id":417,"date":"2026-01-22T03:29:41","date_gmt":"2026-01-21T19:29:41","guid":{"rendered":"https:\/\/www.linerroom.cn\/?p=417"},"modified":"2026-02-26T20:30:13","modified_gmt":"2026-02-26T12:30:13","slug":"flutter%e7%bb%84%e4%bb%b6%e9%80%9f%e6%9f%a5","status":"publish","type":"post","link":"https:\/\/www.linerroom.cn\/?p=417","title":{"rendered":"flutter\u7ec4\u4ef6\u5c5e\u6027\u901f\u67e5"},"content":{"rendered":"\n
\n
\"\"<\/div><\/figure>\n<\/div>\n\n\n\n

Flutter \u7ec4\u4ef6\u5c5e\u6027\u901f\u67e5<\/h1>\n\n\n\n

\u76ee\u5f55<\/h2>\n\n\n\n
    \n
  1. MaterialApp<\/li>\n\n\n\n
  2. Scaffold<\/li>\n\n\n\n
  3. \u72b6\u6001\u66f4\u65b0 – setState<\/li>\n\n\n\n
  4. Container<\/li>\n\n\n\n
  5. Center<\/li>\n\n\n\n
  6. Align<\/li>\n\n\n\n
  7. Padding<\/li>\n\n\n\n
  8. Column<\/li>\n\n\n\n
  9. Row<\/li>\n\n\n\n
  10. Flex \u548c Expanded<\/li>\n\n\n\n
  11. Wrap<\/li>\n\n\n\n
  12. Stack \u548c Positioned<\/li>\n\n\n\n
  13. Text<\/li>\n\n\n\n
  14. Image<\/li>\n\n\n\n
  15. TextField<\/li>\n\n\n\n
  16. SingleChildScrollView<\/li>\n\n\n\n
  17. ListView<\/li>\n\n\n\n
  18. GridView<\/li>\n\n\n\n
  19. CustomScrollView<\/li>\n\n\n\n
  20. PageView<\/li>\n<\/ol>\n\n\n\n

    MaterialApp<\/h2>\n\n\n\n

    \u5c5e\u6027\uff1a<\/p>\n\n\n\n

      \n
    • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
    • navigatorKey<\/code> – \u9876\u5c42\u5bfc\u822a\u94a5\u5319\uff08GlobalKey\uff09\u3002<\/li>\n\n\n\n
    • scaffoldMessengerKey<\/code> – ScaffoldMessenger \u7684 key\uff08GlobalKey\uff09\u3002<\/li>\n\n\n\n
    • title<\/code> – \u5e94\u7528\u6807\u9898\uff08String\uff09\u3002<\/li>\n\n\n\n
    • onGenerateTitle<\/code> – \u52a8\u6001\u751f\u6210\u6807\u9898\u7684\u56de\u8c03\uff08BuildContext -> String\uff09\u3002<\/li>\n\n\n\n
    • color<\/code> – \u5e94\u7528\u4e3b\u9898\u8272\uff08Color\uff09\u3002<\/li>\n\n\n\n
    • theme<\/code> – \u4e3b\u9898\u914d\u7f6e\uff08ThemeData\uff09\u3002<\/li>\n\n\n\n
    • darkTheme<\/code> – \u6697\u8272\u4e3b\u9898\uff08ThemeData\uff09\u3002<\/li>\n\n\n\n
    • themeMode<\/code> – \u4e3b\u9898\u6a21\u5f0f\uff08ThemeMode\uff09\u3002<\/li>\n\n\n\n
    • locale<\/code> – \u5f53\u524d\u672c\u5730\u5316\u4fe1\u606f\uff08Locale\uff09\u3002<\/li>\n\n\n\n
    • localizationsDelegates<\/code> – \u672c\u5730\u5316\u4ee3\u7406\u5217\u8868\uff08LocalizationsDelegate \u5217\u8868\uff09\u3002<\/li>\n\n\n\n
    • supportedLocales<\/code> – \u652f\u6301\u7684\u8bed\u8a00\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
    • home<\/code> – \u5e94\u7528\u7684\u9ed8\u8ba4\u8def\u7531\uff08Widget\uff0c\u901a\u5e38\u4e3a Scaffold \u6216\u81ea\u5b9a\u4e49\u9875\u9762\uff09\u3002<\/li>\n\n\n\n
    • routes<\/code> – \u9759\u6001\u8def\u7531\u8868\uff08Map\uff09\u3002<\/li>\n\n\n\n
    • initialRoute<\/code> – \u521d\u59cb\u8def\u7531\uff08String\uff09\u3002<\/li>\n\n\n\n
    • onGenerateRoute<\/code> – \u52a8\u6001\u8def\u7531\u751f\u6210\u5668\uff08RouteFactory\uff09\u3002<\/li>\n\n\n\n
    • onUnknownRoute<\/code> – \u672a\u77e5\u8def\u7531\u5904\u7406\uff08RouteFactory\uff09\u3002<\/li>\n\n\n\n
    • navigatorObservers<\/code> – \u5bfc\u822a\u89c2\u5bdf\u8005\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
    • builder<\/code> – \u6784\u5efa\u9876\u5c42 Widget \u7684\u56de\u8c03\uff08WidgetBuilder\uff09\u3002<\/li>\n\n\n\n
    • debugShowMaterialGrid<\/code> – \u662f\u5426\u663e\u793a\u7f51\u683c\uff08debug \u7528\uff0cbool\uff09\u3002<\/li>\n\n\n\n
    • debugShowCheckedModeBanner<\/code> – \u662f\u5426\u663e\u793a debug \u6a2a\u5e45\uff08bool\uff09\u3002<\/li>\n\n\n\n
    • showPerformanceOverlay<\/code> – \u662f\u5426\u663e\u793a\u6027\u80fd\u53e0\u52a0\uff08bool\uff09\u3002<\/li>\n\n\n\n
    • checkerboardRasterCacheImages<\/code> – \u68c0\u67e5\u6805\u683c\u7f13\u5b58\uff08bool\uff09\u3002<\/li>\n\n\n\n
    • checkerboardOffscreenLayers<\/code> – \u68c0\u67e5\u79bb\u5c4f\u56fe\u5c42\uff08bool\uff09\u3002<\/li>\n\n\n\n
    • shortcuts<\/code> – \u5feb\u6377\u952e\u6620\u5c04\uff08Map\uff09\u3002<\/li>\n\n\n\n
    • actions<\/code> – \u52a8\u4f5c\u6620\u5c04\uff08Map\uff09\u3002<\/li>\n<\/ul>\n\n\n\n

      \u793a\u4f8b\uff1a<\/p>\n\n\n\n

      MaterialApp(\n  key: const Key('app_root'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\uff0c\u7528\u4e8e\u5b9a\u4f4d\/\u533a\u5206\u540c\u7c7b\u578bWidget\n  navigatorKey: GlobalKey<NavigatorState>(), \/\/ \u5168\u5c40\u5bfc\u822a\u952e\uff0c\u53ef\u901a\u8fc7key\u83b7\u53d6NavigatorState\n  scaffoldMessengerKey: GlobalKey<ScaffoldMessengerState>(), \/\/ \u5168\u5c40SnackBar\/Toast\u63a7\u5236\u952e\n  title: 'Flutter\u7ec4\u4ef6\u793a\u4f8b', \/\/ \u5e94\u7528\u6807\u9898\uff08\u4efb\u52a1\u680f\/\u5207\u6362\u5e94\u7528\u65f6\u663e\u793a\uff09\n  onGenerateTitle: (context) => '\u52a8\u6001\u6807\u9898', \/\/ \u52a8\u6001\u751f\u6210\u6807\u9898\uff08\u53ef\u6839\u636e\u4e0a\u4e0b\u6587\/\u8bed\u8a00\u5207\u6362\uff09\n  color: Colors.blue, \/\/ \u5e94\u7528\u4e3b\u9898\u8272\uff08\u4f4e\u7248\u672c\u517c\u5bb9\uff09\n  theme: ThemeData( \/\/ \u4eae\u8272\u4e3b\u9898\u914d\u7f6e\n    primarySwatch: Colors.blue, \/\/ \u4e3b\u8272\u8c03\n    brightness: Brightness.light, \/\/ \u4eae\u5ea6\n  ),\n  darkTheme: ThemeData(brightness: Brightness.dark), \/\/ \u6697\u8272\u4e3b\u9898\n  themeMode: ThemeMode.system, \/\/ \u4e3b\u9898\u6a21\u5f0f\uff08\u8ddf\u968f\u7cfb\u7edf\/\u4eae\u8272\/\u6697\u8272\uff09\n  locale: const Locale('zh', 'CN'), \/\/ \u672c\u5730\u5316\u8bed\u8a00\uff08\u4e2d\u6587\uff09\n  localizationsDelegates: const [ \/\/ \u672c\u5730\u5316\u4ee3\u7406\uff08\u5904\u7406\u591a\u8bed\u8a00\uff09\n    DefaultMaterialLocalizations.delegate,\n    DefaultWidgetsLocalizations.delegate,\n  ],\n  supportedLocales: const [ \/\/ \u652f\u6301\u7684\u8bed\u8a00\u5217\u8868\n    Locale('zh', 'CN'),\n    Locale('en', 'US'),\n  ],\n  home: const Scaffold(body: Center(child: Text('\u9996\u9875'))), \/\/ \u9ed8\u8ba4\u9996\u9875\n  routes: { \/\/ \u9759\u6001\u8def\u7531\u8868\n    '\/second': (context) => const Scaffold(body: Text('\u7b2c\u4e8c\u9875')),\n  },\n  initialRoute: '\/', \/\/ \u521d\u59cb\u8def\u7531\uff08\u914d\u5408routes\u4f7f\u7528\uff09\n  onGenerateRoute: (settings) { \/\/ \u52a8\u6001\u8def\u7531\u751f\u6210\uff08\u5904\u7406\u672a\u5728routes\u5b9a\u4e49\u7684\u8def\u7531\uff09\n    if (settings.name == '\/dynamic') {\n      return MaterialPageRoute(builder: (context) => const Text('\u52a8\u6001\u9875\u9762'));\n    }\n    return null;\n  },\n  onUnknownRoute: (settings) { \/\/ \u672a\u77e5\u8def\u7531\uff08404\u9875\u9762\uff09\n    return MaterialPageRoute(builder: (context) => const Text('\u9875\u9762\u4e0d\u5b58\u5728'));\n  },\n  navigatorObservers: [ \/\/ \u5bfc\u822a\u89c2\u5bdf\u8005\uff08\u76d1\u542c\u9875\u9762\u8df3\u8f6c\uff09\n    NavigatorObserver(),\n  ],\n  builder: (context, child) { \/\/ \u5168\u5c40Widget\u5305\u88c5\uff08\u5982\u6dfb\u52a0\u5168\u5c40\u906e\u7f69\uff09\n    return child!;\n  },\n  debugShowMaterialGrid: false, \/\/ Debug\u6a21\u5f0f\u662f\u5426\u663e\u793aMaterial\u7f51\u683c\uff08\u8f85\u52a9\u5e03\u5c40\uff09\n  debugShowCheckedModeBanner: false, \/\/ \u9690\u85cfDebug\u6a2a\u5e45\n  showPerformanceOverlay: false, \/\/ \u663e\u793a\u6027\u80fd\u53e0\u52a0\u5c42\uff08\u8c03\u8bd5\u6027\u80fd\uff09\n  checkerboardRasterCacheImages: false, \/\/ \u6805\u683c\u7f13\u5b58\u56fe\u7247\u68cb\u76d8\u5316\uff08\u8c03\u8bd5\u6e32\u67d3\uff09\n  checkerboardOffscreenLayers: false, \/\/ \u79bb\u5c4f\u56fe\u5c42\u68cb\u76d8\u5316\uff08\u8c03\u8bd5\u6e32\u67d3\uff09\n  shortcuts: const { \/\/ \u5feb\u6377\u952e\u6620\u5c04\uff08\u684c\u9762\u7aef\uff09\n    LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): SaveIntent(),\n  },\n  actions: { \/\/ \u5feb\u6377\u952e\u5bf9\u5e94\u52a8\u4f5c\n    SaveIntent: CallbackAction<SaveIntent>(onInvoke: (intent) => print('\u4fdd\u5b58')),\n  },\n);\n\n\/\/ \u81ea\u5b9a\u4e49Intent\uff08\u5feb\u6377\u952e\u793a\u4f8b\u7528\uff09\nclass SaveIntent extends Intent {}<\/code><\/pre>\n\n\n\n
      Scaffold<\/h2>\n\n\n\n
      \u8bf4\u660e\uff1aScaffold<\/code> \u63d0\u4f9b\u4e86\u57fa\u672c\u7684 Material \u9875\u9762\u7ed3\u6784\uff1aAppBar<\/code>\u3001Body<\/code>\u3001Drawer<\/code>\u3001FloatingActionButton<\/code> \u7b49\u3002<\/p>\n\n\n\n
      \u5c5e\u6027\uff1a<\/p>\n\n\n\n
        \n
      • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
      • appBar<\/code> – \u9876\u90e8\u5e94\u7528\u680f\uff08\u901a\u5e38\u4e3a AppBar\uff09\u3002<\/mark><\/li>\n\n\n\n
      • body<\/code> – \u9875\u9762\u4e3b\u4f53\uff08Widget\uff09\u3002<\/mark><\/li>\n\n\n\n
      • floatingActionButton<\/code> – \u60ac\u6d6e\u6309\u94ae\uff08FloatingActionButton\uff09\u3002<\/li>\n\n\n\n
      • floatingActionButtonLocation<\/code> – \u60ac\u6d6e\u6309\u94ae\u4f4d\u7f6e\uff08FloatingActionButtonLocation\uff09\u3002<\/li>\n\n\n\n
      • floatingActionButtonAnimator<\/code> – \u60ac\u6d6e\u6309\u94ae\u52a8\u753b\u5668\uff08FloatingActionButtonAnimator\uff09\u3002<\/li>\n\n\n\n
      • persistentFooterButtons<\/code> – \u6301\u7eed\u663e\u793a\u7684\u5e95\u90e8\u6309\u94ae\uff08List\uff09\u3002<\/li>\n\n\n\n
      • drawer<\/code> – \u62bd\u5c49\uff08Drawer\uff09\u3002<\/li>\n\n\n\n
      • endDrawer<\/code> – \u53f3\u4fa7\u62bd\u5c49\uff08Drawer\uff09\u3002<\/li>\n\n\n\n
      • bottomNavigationBar<\/code> – \u5e95\u90e8\u5bfc\u822a\u680f\uff08Widget\uff09\u3002<\/mark><\/li>\n\n\n\n
      • bottomSheet<\/code> – \u5e95\u90e8\u5f39\u51fa\uff08Widget\uff09\u3002<\/li>\n\n\n\n
      • backgroundColor<\/code> – \u80cc\u666f\u8272\uff08Color\uff09\u3002<\/mark><\/li>\n\n\n\n
      • resizeToAvoidBottomInset<\/code> – \u952e\u76d8\u5f39\u51fa\u65f6\u662f\u5426\u8c03\u6574\uff08bool\uff09\u3002<\/li>\n\n\n\n
      • primary<\/code> – \u662f\u5426\u4e3a\u4e3b Scaffolding\uff08bool\uff09\u3002<\/li>\n\n\n\n
      • drawerDragStartBehavior<\/code> – \u62bd\u5c49\u62d6\u52a8\u884c\u4e3a\uff08DragStartBehavior\uff09\u3002<\/li>\n\n\n\n
      • extendBody<\/code> – \u662f\u5426\u6269\u5c55 body \u5230\u5e95\u90e8\uff08bool\uff09\u3002<\/li>\n\n\n\n
      • extendBodyBehindAppBar<\/code> – \u662f\u5426\u5ef6\u4f38\u5230 appBar \u540e\uff08bool\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
        \u793a\u4f8b\uff1a<\/p>\n\n\n\n
        Scaffold(\n  key: const Key('page_scaffold'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  appBar: AppBar( \/\/ \u9876\u90e8\u5e94\u7528\u680f\n<\/mark>    title: const Text('Scaffold\u793a\u4f8b'), \/\/ \u6807\u9898\n    leading: const Icon(Icons.menu), \/\/ \u5de6\u4fa7\u56fe\u6807\n    actions: const [Icon(Icons.search)], \/\/ \u53f3\u4fa7\u64cd\u4f5c\u56fe\u6807\n  ),\n  body: const Center(child: Text('\u9875\u9762\u4e3b\u4f53\u5185\u5bb9')), \/\/ \u9875\u9762\u4e3b\u4f53<\/mark>\n  floatingActionButton: FloatingActionButton( \/\/ \u60ac\u6d6e\u6309\u94ae\n    onPressed: () {}, \/\/ \u70b9\u51fb\u4e8b\u4ef6\n    child: const Icon(Icons.add), \/\/ \u6309\u94ae\u56fe\u6807\n  ),\n  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, \/\/ \u60ac\u6d6e\u6309\u94ae\u4f4d\u7f6e\uff08\u53f3\u4e0b\u89d2\uff09\n  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling, \/\/ \u60ac\u6d6e\u6309\u94ae\u52a8\u753b\n  persistentFooterButtons: const [ \/\/ \u5e95\u90e8\u56fa\u5b9a\u6309\u94ae\uff08\u59cb\u7ec8\u663e\u793a\uff09\n    TextButton(onPressed: () {}, child: Text('\u6309\u94ae1')),\n    TextButton(onPressed: () {}, child: Text('\u6309\u94ae2')),\n  ],\n  drawer: Drawer( \/\/ \u5de6\u4fa7\u62bd\u5c49\n    child: ListView(\n      children: const [DrawerHeader(child: Text('\u4fa7\u8fb9\u680f'))],\n    ),\n  ),\n  endDrawer: Drawer(child: const Text('\u53f3\u4fa7\u62bd\u5c49')), \/\/ \u53f3\u4fa7\u62bd\u5c49\n  bottomNavigationBar: BottomNavigationBar( \/\/ \u5e95\u90e8\u5bfc\u822a\u680f<\/mark>\n    items: const [\n      BottomNavigationBarItem(icon: Icon(Icons.home), label: '\u9996\u9875'),\n      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '\u8bbe\u7f6e'),\n    ],\n    currentIndex: 0, \/\/ \u5f53\u524d\u9009\u4e2d\u9879\n    onTap: (index) {}, \/\/ \u5207\u6362\u4e8b\u4ef6\n  ),\n  bottomSheet: const SizedBox( \/\/ \u5e95\u90e8\u5f39\u51fa\u5c42\n    height: 50,\n    child: Center(child: Text('\u5e95\u90e8\u5f39\u7a97')),\n  ),\n  backgroundColor: Colors.grey[100], \/\/ \u9875\u9762\u80cc\u666f\u8272\n  resizeToAvoidBottomInset: true, \/\/ \u952e\u76d8\u5f39\u51fa\u65f6\u81ea\u52a8\u8c03\u6574\u5e03\u5c40\uff08\u907f\u514d\u88ab\u906e\u6321\uff09\n  primary: true, \/\/ \u662f\u5426\u4e3a\u9876\u7ea7Scaffold\uff08\u5360\u7528\u72b6\u6001\u680f\u7a7a\u95f4\uff09\n  drawerDragStartBehavior: DragStartBehavior.start, \/\/ \u62bd\u5c49\u62d6\u52a8\u89e6\u53d1\u65b9\u5f0f\n  extendBody: true, \/\/ \u4e3b\u4f53\u5ef6\u4f38\u5230\u5e95\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\uff08\u900f\u660e\u5bfc\u822a\u680f\u65f6\u7528\uff09\n  extendBodyBehindAppBar: true, \/\/ \u4e3b\u4f53\u5ef6\u4f38\u5230AppBar\u4e0b\u65b9\uff08\u900f\u660eAppBar\u65f6\u7528\uff09\n);<\/code><\/pre>\n\n\n\n
        \n\n\n\n
        \u72b6\u6001\u66f4\u65b0 – setState<\/h2>\n\n\n\n
        \u8bf4\u660e\uff1asetState<\/code> \u7528\u4e8e\u5728 StatefulWidget \u4e2d\u66f4\u65b0\u72b6\u6001\u5e76\u89e6\u53d1\u754c\u9762\u91cd\u5efa\u3002<\/p>\n\n\n\n
        \u5c5e\u6027\uff1a<\/p>\n\n\n\n
          \n
        • \u65e0<\/code> – \u6b64\u4e3a\u884c\u4e3a API\uff0c\u5c5e\u4e8e State \u7c7b\u7684\u65b9\u6cd5\uff0c\u7528\u4e8e\u89e6\u53d1\u91cd\u5efa\u3002<\/li>\n<\/ul>\n\n\n\n
          \u793a\u4f8b\uff1a<\/p>\n\n\n\n
          class CounterWidget extends StatefulWidget {\n  @override\n  _CounterWidgetState createState() => _CounterWidgetState();\n}\n\nclass _CounterWidgetState extends State<CounterWidget> {\n  int _count = 0; \/\/ \u5185\u90e8\u72b6\u6001\n\n  void _increment() {\n    setState(() {\n      \/\/ \u5728\u8fd9\u91cc\u4fee\u6539\u72b6\u6001\uff0c\u6846\u67b6\u4f1a\u91cd\u65b0\u8c03\u7528 build\n      _count++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: [\n        Text('count: \\\\$_count'),\n        ElevatedButton(onPressed: _increment, child: Text('Increment')),\n      ],\n    );\n  }\n}<\/code><\/pre>\n\n\n\n
          Container<\/h2>\n\n\n\n
          \u8bf4\u660e\uff1aContainer<\/code> \u662f\u901a\u7528\u5bb9\u5668\uff0c\u53ef\u8bbe\u7f6e\u5c3a\u5bf8\u3001\u8fb9\u8ddd\u3001\u5185\u8fb9\u8ddd\u3001\u80cc\u666f\u3001\u8fb9\u6846\u3001\u5bf9\u9f50\u7b49\u3002<\/p>\n\n\n\n
          \u5c5e\u6027\uff1a<\/p>\n\n\n\n
            \n
          • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
          • alignment<\/code> – \u5b50\u7ec4\u4ef6\u5bf9\u9f50\u65b9\u5f0f\uff08Alignment\uff09\u3002<\/li>\n\n\n\n
          • padding<\/code> – \u5185\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
          • color<\/code> – \u80cc\u666f\u8272\uff08Color\uff0c\u53ea\u6709\u5f53 decoration \u4e3a null \u65f6\u751f\u6548\uff09\u3002<\/li>\n\n\n\n
          • decoration<\/code> – \u88c5\u9970\uff08Decoration\uff0c\u4f8b\u5982 BoxDecoration\uff0c\u53ef\u8bbe\u7f6e color\u3001borderRadius\u3001border \u7b49\uff09\u3002<\/li>\n\n\n\n
          • foregroundDecoration<\/code> – \u524d\u666f\u88c5\u9970\uff08Decoration\uff09\u3002<\/li>\n\n\n\n
          • width<\/code> – \u5bbd\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
          • height<\/code> – \u9ad8\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
          • constraints<\/code> – \u5927\u5c0f\u7ea6\u675f\uff08BoxConstraints\uff09\u3002<\/li>\n\n\n\n
          • margin<\/code> – \u5916\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
          • transform<\/code> – \u53d8\u6362\u77e9\u9635\uff08Matrix4\uff09\u3002<\/li>\n\n\n\n
          • transformAlignment<\/code> – \u53d8\u6362\u5bf9\u9f50\u70b9\uff08Alignment\uff09\u3002<\/li>\n\n\n\n
          • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
            \u793a\u4f8b\uff1a<\/p>\n\n\n\n
            Container(\n  key: const Key('custom_container'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  alignment: Alignment.center, \/\/ \u5b50\u7ec4\u4ef6\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  padding: const EdgeInsets.all(16), \/\/ \u5185\u8fb9\u8ddd\uff08\u4e0a\u4e0b\u5de6\u53f316px\uff09\n  \/\/ color: Colors.red, \/\/ \u80cc\u666f\u8272\uff08\u4e0edecoration\u4e92\u65a5\uff0c\u4e8c\u9009\u4e00\uff09\n  decoration: BoxDecoration( \/\/ \u88c5\u9970\u5668\uff08\u6bd4color\u529f\u80fd\u66f4\u4e30\u5bcc\uff09\n    color: Colors.blue, \/\/ \u80cc\u666f\u8272\n    borderRadius: BorderRadius.circular(12), \/\/ \u5706\u89d2\n    border: Border.all(color: Colors.black, width: 2), \/\/ \u8fb9\u6846\n    boxShadow: const [ \/\/ \u9634\u5f71\n      BoxShadow(color: Colors.grey, blurRadius: 5, offset: Offset(2, 2)),\n    ],\n  ),\n  foregroundDecoration: const BoxDecoration( \/\/ \u524d\u666f\u88c5\u9970\uff08\u8986\u76d6\u5728\u5b50\u7ec4\u4ef6\u4e0a\uff09\n    color: Color.fromRGBO(255, 255, 255, 0.2), \/\/ \u534a\u900f\u660e\u906e\u7f69\n  ),\n  width: 300, \/\/ \u56fa\u5b9a\u5bbd\u5ea6\n  height: 200, \/\/ \u56fa\u5b9a\u9ad8\u5ea6\n  constraints: const BoxConstraints( \/\/ \u5c3a\u5bf8\u7ea6\u675f\uff08\u4f18\u5148\u7ea7\u9ad8\u4e8ewidth\/height\uff09\n    minWidth: 100, \/\/ \u6700\u5c0f\u5bbd\u5ea6\n    maxWidth: 400, \/\/ \u6700\u5927\u5bbd\u5ea6\n    minHeight: 50, \/\/ \u6700\u5c0f\u9ad8\u5ea6\n    maxHeight: 300, \/\/ \u6700\u5927\u9ad8\u5ea6\n  ),\n  margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20), \/\/ \u5916\u8fb9\u8ddd\uff08\u4e0a\u4e0b10\uff0c\u5de6\u53f320\uff09\n  transform: Matrix4.rotationZ(0.1), \/\/ \u65cb\u8f6c\u53d8\u6362\uff080.1\u5f27\u5ea6\uff09\n  transformAlignment: Alignment.center, \/\/ \u53d8\u6362\u7684\u4e2d\u5fc3\u70b9\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\uff08\u8d85\u51fa\u5bb9\u5668\u90e8\u5206\u88c1\u526a\uff09\n  child: const Text('Container\u5185\u5bb9', style: TextStyle(color: Colors.white)), \/\/ \u5b50\u7ec4\u4ef6\n);<\/code><\/pre>\n\n\n\n
            Center<\/h2>\n\n\n\n
            \u8bf4\u660e\uff1aCenter<\/code> \u5c06\u5b50\u7ec4\u4ef6\u5728\u7236\u5e03\u5c40\u4e2d\u5c45\u4e2d\u3002<\/p>\n\n\n\n
            \u5c5e\u6027\uff1a<\/p>\n\n\n\n
              \n
            • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
            • widthFactor<\/code> – \u5bbd\u5ea6\u56e0\u5b50\uff08double\uff0c\u53ef\u7528\u4e8e\u5bf9\u5b50\u9879\u5bbd\u5ea6\u8fdb\u884c\u7f29\u653e\uff09\u3002<\/li>\n\n\n\n
            • heightFactor<\/code> – \u9ad8\u5ea6\u56e0\u5b50\uff08double\uff09\u3002<\/li>\n\n\n\n
            • child<\/code> – \u5b50\u7ec4\u4ef6\uff08Widget\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
              \u793a\u4f8b\uff1a<\/p>\n\n\n\n
              Center(\n  key: const Key('center_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  widthFactor: 2.0, \/\/ \u5bbd\u5ea6\u56e0\u5b50\uff08\u5b50\u7ec4\u4ef6\u5bbd\u5ea6*2\uff0cCenter\u5bbd\u5ea6=\u5b50\u7ec4\u4ef6\u5bbd\u5ea6*2\uff09\n  heightFactor: 1.5, \/\/ \u9ad8\u5ea6\u56e0\u5b50\uff08\u5b50\u7ec4\u4ef6\u9ad8\u5ea6*1.5\uff0cCenter\u9ad8\u5ea6=\u5b50\u7ec4\u4ef6\u9ad8\u5ea6*1.5\uff09\n  child: const Text('\u5c45\u4e2d\u663e\u793a\u7684\u6587\u672c'), \/\/ \u9700\u8981\u5c45\u4e2d\u7684\u5b50\u7ec4\u4ef6\n);<\/code><\/pre>\n\n\n\n
              Align<\/h2>\n\n\n\n
              \u8bf4\u660e\uff1aAlign<\/code> \u7528\u6765\u66f4\u7cbe\u7ec6\u5730\u5bf9\u9f50\u5b50\u7ec4\u4ef6\uff0c\u652f\u6301 alignment<\/code> \u548c\u5c3a\u5bf8\u56e0\u5b50\u3002<\/p>\n\n\n\n
              \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                \n
              • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
              • alignment<\/code> – \u5bf9\u9f50\u65b9\u5f0f\uff08Alignment, \u5982 Alignment.topRight\uff09\u3002<\/li>\n\n\n\n
              • widthFactor<\/code> – \u5bbd\u5ea6\u56e0\u5b50\uff08double\uff0c\u53ef\u7528\u4e8e\u5bf9\u5b50\u9879\u5bbd\u5ea6\u8fdb\u884c\u7f29\u653e\uff09\u3002<\/li>\n\n\n\n
              • heightFactor<\/code> – \u9ad8\u5ea6\u56e0\u5b50\uff08double\uff09\u3002<\/li>\n\n\n\n
              • child<\/code> – \u5b50\u7ec4\u4ef6\uff08Widget\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                Align(\n  key: const Key('align_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  alignment: Alignment.bottomRight, \/\/ \u5bf9\u9f50\u65b9\u5f0f\uff08\u53f3\u4e0b\u89d2\uff09\n  \/\/ \u4e5f\u53ef\u4f7f\u7528\u7cbe\u786e\u504f\u79fb\uff1aAlignment(0.5, 0.5) \u7b49\u540c\u4e8ecenter\n  widthFactor: 1.0, \/\/ \u5bbd\u5ea6\u56e0\u5b50\uff08Align\u5bbd\u5ea6=\u5b50\u7ec4\u4ef6\u5bbd\u5ea6*\u56e0\u5b50\uff09\n  heightFactor: 1.0, \/\/ \u9ad8\u5ea6\u56e0\u5b50\uff08Align\u9ad8\u5ea6=\u5b50\u7ec4\u4ef6\u9ad8\u5ea6*\u56e0\u5b50\uff09\n  child: const Icon(Icons.star, size: 30), \/\/ \u5bf9\u9f50\u7684\u5b50\u7ec4\u4ef6\n);<\/code><\/pre>\n\n\n\n
                Padding<\/h2>\n\n\n\n
                \u8bf4\u660e\uff1aPadding<\/code> \u7528\u4e8e\u7ed9\u5b50\u7ec4\u4ef6\u6dfb\u52a0\u5185\u8fb9\u8ddd\u3002<\/p>\n\n\n\n
                \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                  \n
                • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                • padding<\/code> – \u5185\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
                • child<\/code> – \u5b50\u7ec4\u4ef6\uff08Widget\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                  \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                  Padding(\n  key: const Key('padding_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  \/\/ \u5185\u8fb9\u8ddd\u914d\u7f6e\uff08\u591a\u79cd\u65b9\u5f0f\uff09\n  \/\/ \u65b9\u5f0f1\uff1a\u4e0a\u4e0b\u5de6\u53f3\u7edf\u4e00\u503c\n  \/\/ padding: const EdgeInsets.all(16),\n  \/\/ \u65b9\u5f0f2\uff1a\u4e0a\u4e0b\/\u5de6\u53f3\u5206\u522b\u8bbe\u7f6e\n  \/\/ padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),\n  \/\/ \u65b9\u5f0f3\uff1a\u7cbe\u786e\u8bbe\u7f6e\u56db\u4e2a\u65b9\u5411\uff08\u5de6\u3001\u4e0a\u3001\u53f3\u3001\u4e0b\uff09\n  padding: const EdgeInsets.fromLTRB(10, 20, 10, 20),\n  child: const Text('\u5e26\u5185\u8fb9\u8ddd\u7684\u6587\u672c'), \/\/ \u5305\u88f9\u7684\u5b50\u7ec4\u4ef6\n);<\/code><\/pre>\n\n\n\n
                  Column<\/h2>\n\n\n\n
                  \u8bf4\u660e\uff1aColumn<\/code> \u7528\u4e8e\u5782\u76f4\u5e03\u5c40\uff0c\u6309\u5217\u6392\u5217\u5b50\u9879\u3002<\/p>\n\n\n\n
                  \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                    \n
                  • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                  • children<\/code> – \u5b50\u7ec4\u4ef6\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
                  • mainAxisAlignment<\/code> – \u4e3b\u8f74\u5bf9\u9f50\uff08MainAxisAlignment\uff0c\u4f8b\u5982 center\uff09\u3002<\/li>\n\n\n\n
                  • crossAxisAlignment<\/code> – \u4ea4\u53c9\u8f74\u5bf9\u9f50\uff08CrossAxisAlignment\uff0c\u4f8b\u5982 start\uff09\u3002<\/li>\n\n\n\n
                  • mainAxisSize<\/code> – \u4e3b\u8f74\u5c3a\u5bf8\uff08MainAxisSize\uff0cmin \u6216 max\uff09\u3002<\/li>\n\n\n\n
                  • textDirection<\/code> – \u6587\u672c\u65b9\u5411\uff08TextDirection\uff09\u3002<\/li>\n\n\n\n
                  • verticalDirection<\/code> – \u5782\u76f4\u65b9\u5411\uff08VerticalDirection\uff09\u3002<\/li>\n\n\n\n
                  • textBaseline<\/code> – \u6587\u672c\u57fa\u7ebf\uff08TextBaseline\uff0c\u7528\u4e8e\u5bf9\u9f50\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                    \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                    Column(\n  key: const Key('column_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  children: const [ \/\/ \u5782\u76f4\u6392\u5217\u7684\u5b50\u7ec4\u4ef6\u5217\u8868\n    Text('\u7b2c\u4e00\u884c\u6587\u672c'),\n    SizedBox(height: 10), \/\/ \u884c\u95f4\u8ddd\n    Text('\u7b2c\u4e8c\u884c\u6587\u672c'),\n    Icon(Icons.check),\n  ],\n  mainAxisAlignment: MainAxisAlignment.center, \/\/ \u4e3b\u8f74\uff08\u5782\u76f4\uff09\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  \/\/ \u4e3b\u8f74\u5bf9\u9f50\u53ef\u9009\u503c\uff1astart(\u9876\u90e8)\u3001end(\u5e95\u90e8)\u3001spaceBetween(\u4e24\u7aef\u5bf9\u9f50)\u3001spaceAround(\u5747\u5300\u5206\u5e03)\u3001spaceEvenly(\u7b49\u5206)\n  crossAxisAlignment: CrossAxisAlignment.start, \/\/ \u4ea4\u53c9\u8f74\uff08\u6c34\u5e73\uff09\u5bf9\u9f50\u65b9\u5f0f\uff08\u5de6\u5bf9\u9f50\uff09\n  \/\/ \u4ea4\u53c9\u8f74\u5bf9\u9f50\u53ef\u9009\u503c\uff1acenter(\u5c45\u4e2d)\u3001end(\u53f3\u5bf9\u9f50)\u3001stretch(\u62c9\u4f38\u586b\u6ee1)\n  mainAxisSize: MainAxisSize.min, \/\/ \u4e3b\u8f74\u5c3a\u5bf8\uff08min\uff1a\u9002\u5e94\u5b50\u7ec4\u4ef6\u9ad8\u5ea6\uff1bmax\uff1a\u586b\u6ee1\u7236\u5bb9\u5668\u9ad8\u5ea6\uff09\n  textDirection: TextDirection.ltr, \/\/ \u6587\u672c\u65b9\u5411\uff08\u4ece\u5de6\u5230\u53f3\uff09\n  verticalDirection: VerticalDirection.down, \/\/ \u5782\u76f4\u6392\u5217\u65b9\u5411\uff08\u4ece\u4e0a\u5230\u4e0b\uff09\n  textBaseline: TextBaseline.alphabetic, \/\/ \u6587\u672c\u57fa\u7ebf\uff08\u7528\u4e8e\u591a\u884c\u6587\u672c\u5bf9\u9f50\uff09\n);<\/code><\/pre>\n\n\n\n
                    Row<\/h2>\n\n\n\n
                    \u8bf4\u660e\uff1aRow<\/code> \u7528\u4e8e\u6c34\u5e73\u5e03\u5c40\uff0c\u6309\u884c\u6392\u5217\u5b50\u9879\u3002<\/p>\n\n\n\n
                    \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                      \n
                    • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                    • children<\/code> – \u5b50\u7ec4\u4ef6\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
                    • mainAxisAlignment<\/code> – \u4e3b\u8f74\u5bf9\u9f50\uff08MainAxisAlignment\uff0c\u4f8b\u5982 spaceBetween\uff09\u3002<\/li>\n\n\n\n
                    • crossAxisAlignment<\/code> – \u4ea4\u53c9\u8f74\u5bf9\u9f50\uff08CrossAxisAlignment\uff09\u3002<\/li>\n\n\n\n
                    • mainAxisSize<\/code> – \u4e3b\u8f74\u5c3a\u5bf8\uff08MainAxisSize\uff09\u3002<\/li>\n\n\n\n
                    • textDirection<\/code> – \u6587\u672c\u65b9\u5411\uff08TextDirection\uff09\u3002<\/li>\n\n\n\n
                    • verticalDirection<\/code> – \u5782\u76f4\u65b9\u5411\uff08VerticalDirection\uff09\u3002<\/li>\n\n\n\n
                    • textBaseline<\/code> – \u6587\u672c\u57fa\u7ebf\uff08TextBaseline\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                      \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                      Row(\n  key: const Key('row_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  children: const [ \/\/ \u6c34\u5e73\u6392\u5217\u7684\u5b50\u7ec4\u4ef6\u5217\u8868\n    Icon(Icons.menu),\n    SizedBox(width: 10), \/\/ \u5217\u95f4\u8ddd\n    Text('\u6807\u9898\u6587\u672c'),\n    Spacer(), \/\/ \u81ea\u52a8\u586b\u5145\u5269\u4f59\u7a7a\u95f4\n    Icon(Icons.search),\n  ],\n  mainAxisAlignment: MainAxisAlignment.spaceBetween, \/\/ \u4e3b\u8f74\uff08\u6c34\u5e73\uff09\u5bf9\u9f50\u65b9\u5f0f\uff08\u4e24\u7aef\u5bf9\u9f50\uff09\n  crossAxisAlignment: CrossAxisAlignment.center, \/\/ \u4ea4\u53c9\u8f74\uff08\u5782\u76f4\uff09\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  mainAxisSize: MainAxisSize.max, \/\/ \u4e3b\u8f74\u5c3a\u5bf8\uff08max\uff1a\u586b\u6ee1\u7236\u5bb9\u5668\u5bbd\u5ea6\uff1bmin\uff1a\u9002\u5e94\u5b50\u7ec4\u4ef6\u5bbd\u5ea6\uff09\n  textDirection: TextDirection.ltr, \/\/ \u6587\u672c\u65b9\u5411\uff08\u4ece\u5de6\u5230\u53f3\uff09\n  verticalDirection: VerticalDirection.down, \/\/ \u5782\u76f4\u65b9\u5411\uff08\u5f71\u54cd\u4ea4\u53c9\u8f74\u5bf9\u9f50\uff09\n  textBaseline: TextBaseline.alphabetic, \/\/ \u6587\u672c\u57fa\u7ebf\uff08\u7528\u4e8e\u591a\u5217\u6587\u672c\u5bf9\u9f50\uff09\n);<\/code><\/pre>\n\n\n\n
                      Flex \u548c Expanded<\/h2>\n\n\n\n
                      \u8bf4\u660e\uff1aFlex<\/code> \u662f Row<\/code>\/Column<\/code> \u7684\u5e95\u5c42\u62bd\u8c61\uff0cExpanded<\/code> \u7528\u6765\u5728\u4e3b\u8f74\u4e0a\u6269\u5c55\u5360\u7528\u5269\u4f59\u7a7a\u95f4\u3002<\/p>\n\n\n\n
                      \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                        \n
                      • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                      • flex<\/code> – \u6743\u91cd\uff08int\uff0c\u5e38\u7528\u4e8e Expanded \u6216 Flexible\uff09\u3002<\/li>\n\n\n\n
                      • fit<\/code> – \u9002\u914d\u65b9\u5f0f\uff08FlexFit\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                        \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                        Flex(\n  key: const Key('flex_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  direction: Axis.horizontal, \/\/ \u6392\u5217\u65b9\u5411\uff08horizontal=Row\uff0cvertical=Column\uff09\n  children: [\n    \/\/ Expanded\uff1a\u5360\u4e3b\u8f74\u5269\u4f59\u7a7a\u95f4\uff08\u6838\u5fc3\u5c5e\u6027flex\u4e3a\u6743\u91cd\uff09\n    Expanded(\n      flex: 1, \/\/ \u6743\u91cd1\uff08\u603b\u6743\u91cd=1+2=3\uff0c\u53601\/3\u5bbd\u5ea6\uff09\n      child: Container(\n        height: 50,\n        color: Colors.red,\n        alignment: Alignment.center,\n        child: const Text('1\u4efd', style: TextStyle(color: Colors.white)),\n      ),\n    ),\n    Expanded(\n      flex: 2, \/\/ \u6743\u91cd2\uff08\u53602\/3\u5bbd\u5ea6\uff09\n      fit: FlexFit.tight, \/\/ \u5f3a\u5236\u586b\u6ee1\u5206\u914d\u7684\u7a7a\u95f4\uff08\u9ed8\u8ba4\uff09\n      child: Container(\n        height: 50,\n        color: Colors.green,\n        alignment: Alignment.center,\n        child: const Text('2\u4efd', style: TextStyle(color: Colors.white)),\n      ),\n    ),\n  ],\n);<\/code><\/pre>\n\n\n\n
                        Wrap<\/h2>\n\n\n\n
                        \u8bf4\u660e\uff1aWrap<\/code> \u662f\u6362\u884c\u5e03\u5c40\uff0c\u8d85\u51fa\u4f1a\u6362\u884c\uff0c\u7c7b\u4f3c CSS \u7684 flex-wrap\u3002<\/p>\n\n\n\n
                        \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                          \n
                        • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                        • direction<\/code> – \u65b9\u5411\uff08Axis.horizontal\/vertical\uff09\u3002<\/li>\n\n\n\n
                        • alignment<\/code> – \u5bf9\u9f50\uff08WrapAlignment\uff09\u3002<\/li>\n\n\n\n
                        • spacing<\/code> – \u5b50\u9879\u95f4\u6c34\u5e73\u95f4\u8ddd\uff08double\uff09\u3002<\/li>\n\n\n\n
                        • runSpacing<\/code> – \u884c\u95f4\u8ddd\uff08double\uff09\u3002<\/li>\n\n\n\n
                        • runAlignment<\/code> – \u884c\u5bf9\u9f50\uff08WrapAlignment\uff09\u3002<\/li>\n\n\n\n
                        • crossAxisAlignment<\/code> – \u4ea4\u53c9\u8f74\u5bf9\u9f50\uff08WrapCrossAlignment\uff09\u3002<\/li>\n\n\n\n
                        • textDirection<\/code> – \u6587\u672c\u65b9\u5411\uff08TextDirection\uff09\u3002<\/li>\n\n\n\n
                        • verticalDirection<\/code> – \u5782\u76f4\u65b9\u5411\uff08VerticalDirection\uff09\u3002<\/li>\n\n\n\n
                        • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                          \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                          Wrap(\n  key: const Key('wrap_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  direction: Axis.horizontal, \/\/ \u6392\u5217\u65b9\u5411\uff08\u6c34\u5e73\uff09\n  alignment: WrapAlignment.start, \/\/ \u4e3b\u8f74\u5bf9\u9f50\u65b9\u5f0f\uff08\u5de6\u5bf9\u9f50\uff09\n  spacing: 8.0, \/\/ \u5b50\u7ec4\u4ef6\u4e4b\u95f4\u7684\u6c34\u5e73\u95f4\u8ddd\n  runSpacing: 4.0, \/\/ \u884c\u4e0e\u884c\u4e4b\u95f4\u7684\u5782\u76f4\u95f4\u8ddd\n  runAlignment: WrapAlignment.center, \/\/ \u884c\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  crossAxisAlignment: WrapCrossAlignment.center, \/\/ \u4ea4\u53c9\u8f74\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  textDirection: TextDirection.ltr, \/\/ \u6587\u672c\u65b9\u5411\n  verticalDirection: VerticalDirection.down, \/\/ \u5782\u76f4\u6392\u5217\u65b9\u5411\n  clipBehavior: Clip.none, \/\/ \u88c1\u526a\u65b9\u5f0f\uff08\u65e0\u88c1\u526a\uff09\n  \/\/ \u751f\u62108\u4e2aChip\u5b50\u7ec4\u4ef6\uff08\u8d85\u51fa\u5bbd\u5ea6\u81ea\u52a8\u6362\u884c\uff09\n  children: List.generate(8, (index) {\n    return Chip(\n      label: Text('\u6807\u7b7e $index'),\n      margin: const EdgeInsets.all(2),\n    );\n  }),\n);<\/code><\/pre>\n\n\n\n
                          Stack \u548c Positioned<\/h2>\n\n\n\n
                          \u8bf4\u660e\uff1aStack<\/code> \u7528\u4e8e\u53e0\u653e\u5e03\u5c40\uff0c\u914d\u5408 Positioned<\/code> \u53ef\u505a\u7edd\u5bf9\u5b9a\u4f4d\u3002<\/p>\n\n\n\n
                          \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                            \n
                          • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                          • alignment<\/code> – \u5bf9\u9f50\u65b9\u5f0f\uff08Alignment\uff09\u3002<\/li>\n\n\n\n
                          • textDirection<\/code> – \u6587\u672c\u65b9\u5411\uff08TextDirection\uff09\u3002<\/li>\n\n\n\n
                          • fit<\/code> – \u9002\u914d\u65b9\u5f0f\uff08StackFit\uff09\u3002<\/li>\n\n\n\n
                          • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n\n\n\n
                          • children<\/code> – \u5b50\u7ec4\u4ef6\u5217\u8868\uff08List\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                            Positioned<\/code> \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                              \n
                            • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                            • left<\/code> – \u8ddd\u7236\u5bb9\u5668\u5de6\u8fb9\u8ddd\u79bb\uff08double\uff09\u3002<\/li>\n\n\n\n
                            • top<\/code> – \u8ddd\u7236\u5bb9\u5668\u9876\u90e8\u8ddd\u79bb\uff08double\uff09\u3002<\/li>\n\n\n\n
                            • right<\/code> – \u8ddd\u7236\u5bb9\u5668\u53f3\u8fb9\u8ddd\u79bb\uff08double\uff09\u3002<\/li>\n\n\n\n
                            • bottom<\/code> – \u8ddd\u7236\u5bb9\u5668\u5e95\u90e8\u8ddd\u79bb\uff08double\uff09\u3002<\/li>\n\n\n\n
                            • width<\/code> – \u56fa\u5b9a\u5bbd\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
                            • height<\/code> – \u56fa\u5b9a\u9ad8\u5ea6\uff08double\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                              \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                              Stack(\n  key: const Key('stack_widget'), \/\/ Widget\u552f\u4e00\u6807\u8bc6\n  alignment: Alignment.center, \/\/ \u9ed8\u8ba4\u5b50\u7ec4\u4ef6\u5bf9\u9f50\u65b9\u5f0f\uff08\u5c45\u4e2d\uff09\n  textDirection: TextDirection.ltr, \/\/ \u6587\u672c\u65b9\u5411\n  fit: StackFit.loose, \/\/ \u5b50\u7ec4\u4ef6\u5c3a\u5bf8\u9002\u914d\uff08loose\uff1a\u81ea\u9002\u5e94\uff1bexpand\uff1a\u586b\u6ee1Stack\uff09\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\uff08\u8d85\u51faStack\u90e8\u5206\u88c1\u526a\uff09\n  children: [\n    \/\/ \u5e95\u5c42\u7ec4\u4ef6\uff08\u80cc\u666f\uff09\n    Container(\n      width: 300,\n      height: 200,\n      color: Colors.blue[100],\n    ),\n    \/\/ \u5c45\u4e2d\u663e\u793a\u7684\u6587\u672c\uff08\u4f7f\u7528\u9ed8\u8ba4alignment\uff09\n    const Text('Stack\u5e95\u5c42\u6587\u672c'),\n    \/\/ \u7edd\u5bf9\u5b9a\u4f4d\u7ec4\u4ef6\uff08\u8986\u76d6\u5728\u9876\u5c42\uff09\n    Positioned(\n      key: const Key('positioned_widget'), \/\/ \u552f\u4e00\u6807\u8bc6\n      left: 20, \/\/ \u8ddd\u5de6\u4fa720px\n      bottom: 20, \/\/ \u8ddd\u5e95\u90e820px\n      \/\/ right: 20, \/\/ \u8ddd\u53f3\u4fa720px\uff08\u4e0eleft\u4e8c\u9009\u4e00\uff0c\u6216\u540c\u65f6\u8bbe\u7f6e\u56fa\u5b9a\u5bbd\u5ea6\uff09\n      \/\/ top: 20, \/\/ \u8ddd\u9876\u90e820px\uff08\u4e0ebottom\u4e8c\u9009\u4e00\uff0c\u6216\u540c\u65f6\u8bbe\u7f6e\u56fa\u5b9a\u9ad8\u5ea6\uff09\n      width: 80, \/\/ \u56fa\u5b9a\u5bbd\u5ea6\n      height: 40, \/\/ \u56fa\u5b9a\u9ad8\u5ea6\n      child: ElevatedButton(\n        onPressed: () {},\n        child: const Text('\u5b9a\u4f4d\u6309\u94ae'),\n      ),\n    ),\n  ],\n);<\/code><\/pre>\n\n\n\n
                              Text<\/h2>\n\n\n\n
                              \u8bf4\u660e\uff1aText<\/code> \u7528\u4e8e\u663e\u793a\u6587\u672c\uff0c\u652f\u6301\u6837\u5f0f\u4e0e\u6ea2\u51fa\u5904\u7406\u3002<\/p>\n\n\n\n
                              \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                \n
                              • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                              • data<\/code> – \u6587\u672c\u5185\u5bb9\uff08String\uff0c\u901a\u5e38\u4e3a\u7b2c\u4e00\u4e2a\u4f4d\u7f6e\u53c2\u6570\uff09\u3002<\/li>\n\n\n\n
                              • style<\/code> – \u6587\u672c\u6837\u5f0f\uff08TextStyle\uff09\u3002<\/li>\n\n\n\n
                              • strutStyle<\/code> – \u6587\u672c\u652f\u6491\u6837\u5f0f\uff08StrutStyle\uff09\u3002<\/li>\n\n\n\n
                              • textAlign<\/code> – \u5bf9\u9f50\uff08TextAlign\uff09\u3002<\/li>\n\n\n\n
                              • textDirection<\/code> – \u6587\u672c\u65b9\u5411\uff08TextDirection\uff09\u3002<\/li>\n\n\n\n
                              • locale<\/code> – \u6587\u672c\u8bed\u8a00\uff08Locale\uff09\u3002<\/li>\n\n\n\n
                              • softWrap<\/code> – \u662f\u5426\u8f6f\u6362\u884c\uff08bool\uff09\u3002<\/li>\n\n\n\n
                              • overflow<\/code> – \u6ea2\u51fa\u5904\u7406\uff08TextOverflow\uff0c\u4f8b\u5982 ellipsis\uff09\u3002<\/li>\n\n\n\n
                              • textScaleFactor<\/code> – \u7f29\u653e\u56e0\u5b50\uff08double\uff09\u3002<\/li>\n\n\n\n
                              • maxLines<\/code> – \u6700\u5927\u884c\u6570\uff08int\uff09\u3002<\/li>\n\n\n\n
                              • semanticsLabel<\/code> – \u8bed\u4e49\u6807\u7b7e\uff08String\uff09\u3002<\/li>\n\n\n\n
                              • textWidthBasis<\/code> – \u6587\u672c\u5bbd\u5ea6\u57fa\u51c6\uff08TextWidthBasis\uff09\u3002<\/li>\n\n\n\n
                              • textHeightBehavior<\/code> – \u6587\u672c\u9ad8\u5ea6\u884c\u4e3a\uff08TextHeightBehavior\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                Text(\n  '\u8fd9\u662f\u4e00\u6bb5\u8d85\u957f\u7684\u6d4b\u8bd5\u6587\u672c\uff0c\u7528\u4e8e\u6f14\u793a\u6587\u672c\u6ea2\u51fa\u5904\u7406\u3001\u6837\u5f0f\u914d\u7f6e\u7b49\u5c5e\u6027\u7684\u4f7f\u7528\u65b9\u5f0f', \/\/ \u6587\u672c\u5185\u5bb9\n  key: const Key('text_widget'), \/\/ \u552f\u4e00\u6807\u8bc6\n  style: const TextStyle( \/\/ \u6587\u672c\u6837\u5f0f\n    fontSize: 16, \/\/ \u5b57\u4f53\u5927\u5c0f\n    color: Colors.black87, \/\/ \u5b57\u4f53\u989c\u8272\n    fontWeight: FontWeight.bold, \/\/ \u5b57\u4f53\u7c97\u7ec6\uff08bold=\u7c97\u4f53\uff09\n    fontStyle: FontStyle.italic, \/\/ \u5b57\u4f53\u6837\u5f0f\uff08italic=\u659c\u4f53\uff09\n    decoration: TextDecoration.underline, \/\/ \u6587\u672c\u88c5\u9970\uff08\u4e0b\u5212\u7ebf\uff09\n    decorationColor: Colors.red, \/\/ \u88c5\u9970\u7ebf\u989c\u8272\n    letterSpacing: 1.0, \/\/ \u5b57\u95f4\u8ddd\n    wordSpacing: 2.0, \/\/ \u8bcd\u95f4\u8ddd\uff08\u82f1\u6587\uff09\n    height: 1.5, \/\/ \u884c\u9ad8\n  ),\n  strutStyle: const StrutStyle(height: 1.5), \/\/ \u6587\u672c\u652f\u6491\u6837\u5f0f\uff08\u7edf\u4e00\u884c\u9ad8\uff09\n  textAlign: TextAlign.left, \/\/ \u6587\u672c\u5bf9\u9f50\u65b9\u5f0f\uff08\u5de6\u5bf9\u9f50\uff09\n  textDirection: TextDirection.ltr, \/\/ \u6587\u672c\u65b9\u5411\uff08\u4ece\u5de6\u5230\u53f3\uff09\n  locale: const Locale('zh', 'CN'), \/\/ \u672c\u5730\u5316\uff08\u5f71\u54cd\u6570\u5b57\/\u65e5\u671f\u683c\u5f0f\uff09\n  softWrap: true, \/\/ \u662f\u5426\u81ea\u52a8\u6362\u884c\uff08true=\u6362\u884c\uff0cfalse=\u4e0d\u6362\u884c\uff09\n  overflow: TextOverflow.ellipsis, \/\/ \u6ea2\u51fa\u5904\u7406\uff08ellipsis=\u7701\u7565\u53f7\uff0cclip=\u88c1\u526a\uff0cfade=\u6e10\u53d8\uff09\n  textScaleFactor: 1.0, \/\/ \u6587\u672c\u7f29\u653e\u56e0\u5b50\uff08\u9002\u914d\u7cfb\u7edf\u5b57\u4f53\u5927\u5c0f\uff09\n  maxLines: 2, \/\/ \u6700\u5927\u663e\u793a\u884c\u6570\n  semanticsLabel: '\u6d4b\u8bd5\u6587\u672c', \/\/ \u8bed\u4e49\u6807\u7b7e\uff08\u65e0\u969c\u788d\u8bbf\u95ee\uff09\n  textWidthBasis: TextWidthBasis.parent, \/\/ \u6587\u672c\u5bbd\u5ea6\u57fa\u51c6\uff08\u57fa\u4e8e\u7236\u5bb9\u5668\uff09\n  textHeightBehavior: const TextHeightBehavior( \/\/ \u6587\u672c\u9ad8\u5ea6\u884c\u4e3a\n    applyHeightToFirstAscent: true,\n    applyHeightToLastDescent: true,\n  ),\n);<\/code><\/pre>\n\n\n\n
                                Image<\/h2>\n\n\n\n
                                \u8bf4\u660e\uff1aImage<\/code> \u7cfb\u5217\u7528\u4e8e\u52a0\u8f7d\u56fe\u7247\uff08asset\/network\/file\uff09\u3002<\/p>\n\n\n\n
                                \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                  \n
                                • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                • image<\/code> – \u56fe\u7247\u63d0\u4f9b\u8005\uff08ImageProvider\uff0c\u5982 AssetImage\/NetworkImage\uff09\u3002<\/li>\n\n\n\n
                                • frameBuilder<\/code> – \u5e27\u6784\u5efa\u5668\uff08FrameBuilder\uff09\u3002<\/li>\n\n\n\n
                                • loadingBuilder<\/code> – \u52a0\u8f7d\u6784\u5efa\u5668\uff08LoadingBuilder\uff09\u3002<\/li>\n\n\n\n
                                • errorBuilder<\/code> – \u9519\u8bef\u56de\u8c03\uff08ImageErrorWidgetBuilder\uff09\u3002<\/li>\n\n\n\n
                                • semanticLabel<\/code> – \u8bed\u4e49\u6807\u7b7e\uff08String\uff09\u3002<\/li>\n\n\n\n
                                • excludeFromSemantics<\/code> – \u662f\u5426\u4ece\u8bed\u4e49\u6811\u4e2d\u6392\u9664\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                • width<\/code> – \u5bbd\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
                                • height<\/code> – \u9ad8\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
                                • color<\/code> – \u989c\u8272\u6df7\u5408\uff08Color\uff09\u3002<\/li>\n\n\n\n
                                • colorBlendMode<\/code> – \u989c\u8272\u6df7\u5408\u6a21\u5f0f\uff08BlendMode\uff09\u3002<\/li>\n\n\n\n
                                • fit<\/code> – \u586b\u5145\u65b9\u5f0f\uff08BoxFit\uff09\u3002<\/li>\n\n\n\n
                                • alignment<\/code> – \u5bf9\u9f50\u65b9\u5f0f\uff08Alignment\uff09\u3002<\/li>\n\n\n\n
                                • repeat<\/code> – \u91cd\u590d\u65b9\u5f0f\uff08ImageRepeat\uff09\u3002<\/li>\n\n\n\n
                                • centerSlice<\/code> – \u4e2d\u5fc3\u5207\u7247\uff08Rect\uff09\u3002<\/li>\n\n\n\n
                                • matchTextDirection<\/code> – \u662f\u5426\u6839\u636e\u6587\u672c\u65b9\u5411\u7ffb\u8f6c\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                • gaplessPlayback<\/code> – \u65e0\u7f1d\u64ad\u653e\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                • isAntiAlias<\/code> – \u6297\u952f\u9f7f\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                • filterQuality<\/code> – \u8fc7\u6ee4\u8d28\u91cf\uff08FilterQuality\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                  \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                  Image.network(\n  'https:\/\/example.com\/test.jpg', \/\/ \u7f51\u7edc\u56fe\u7247URL\n  key: const Key('image_widget'), \/\/ \u552f\u4e00\u6807\u8bc6\n  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {\n    \/\/ \u56fe\u7247\u5e27\u6784\u5efa\u5668\uff08\u53ef\u81ea\u5b9a\u4e49\u52a0\u8f7d\u8fc7\u7a0bUI\uff09\n    if (frame == null) return const CircularProgressIndicator(); \/\/ \u52a0\u8f7d\u4e2d\u663e\u793a\u8fdb\u5ea6\u6761\n    return child;\n  },\n  loadingBuilder: (context, child, loadingProgress) {\n    \/\/ \u52a0\u8f7d\u6784\u5efa\u5668\uff08\u76d1\u542c\u52a0\u8f7d\u8fdb\u5ea6\uff09\n    if (loadingProgress == null) return child;\n    return Center(\n      child: CircularProgressIndicator(\n        value: loadingProgress.expectedTotalBytes != null\n            ? loadingProgress.cumulativeBytesLoaded \/ loadingProgress.expectedTotalBytes!\n            : null,\n      ),\n    );\n  },\n  errorBuilder: (context, error, stackTrace) {\n    \/\/ \u52a0\u8f7d\u5931\u8d25UI\n    return const Icon(Icons.error, color: Colors.red);\n  },\n  semanticLabel: '\u6d4b\u8bd5\u56fe\u7247', \/\/ \u8bed\u4e49\u6807\u7b7e\uff08\u65e0\u969c\u788d\u8bbf\u95ee\uff09\n  excludeFromSemantics: false, \/\/ \u662f\u5426\u6392\u9664\u5728\u8bed\u4e49\u6811\u5916\n  width: 200, \/\/ \u56fe\u7247\u5bbd\u5ea6\n  height: 150, \/\/ \u56fe\u7247\u9ad8\u5ea6\n  color: Colors.grey, \/\/ \u989c\u8272\u6df7\u5408\uff08\u53e0\u52a0\u989c\u8272\uff09\n  colorBlendMode: BlendMode.multiply, \/\/ \u989c\u8272\u6df7\u5408\u6a21\u5f0f\n  fit: BoxFit.cover, \/\/ \u586b\u5145\u65b9\u5f0f\uff08cover=\u8986\u76d6\uff0ccontain=\u9002\u5e94\uff0cfill=\u62c9\u4f38\uff0cfitWidth=\u9002\u914d\u5bbd\u5ea6\uff09\n  alignment: Alignment.center, \/\/ \u5bf9\u9f50\u65b9\u5f0f\n  repeat: ImageRepeat.noRepeat, \/\/ \u91cd\u590d\u65b9\u5f0f\uff08noRepeat=\u4e0d\u91cd\u590d\uff0crepeat=\u5e73\u94fa\uff09\n  centerSlice: const Rect.fromLTRB(10, 10, 100, 100), \/\/ \u4e2d\u5fc3\u5207\u7247\uff08.9\u56fe\u62c9\u4f38\u7528\uff09\n  matchTextDirection: false, \/\/ \u662f\u5426\u8ddf\u968f\u6587\u672c\u65b9\u5411\u7ffb\u8f6c\n  gaplessPlayback: false, \/\/ \u56fe\u7247\u5207\u6362\u65f6\u662f\u5426\u65e0\u7f1d\u64ad\u653e\n  isAntiAlias: true, \/\/ \u662f\u5426\u5f00\u542f\u6297\u952f\u9f7f\uff08\u63d0\u5347\u6e05\u6670\u5ea6\uff09\n  filterQuality: FilterQuality.high, \/\/ \u8fc7\u6ee4\u8d28\u91cf\uff08high=\u9ad8\u8d28\u91cf\uff0clow=\u4f4e\u8d28\u91cf\uff09\n);\n\n\/\/ \u672c\u5730\u8d44\u6e90\u56fe\u7247\u793a\u4f8b\uff08\u5c5e\u6027\u4e0enetwork\u4e00\u81f4\uff0c\u4ec5imageProvider\u4e0d\u540c\uff09\n\/\/ Image.asset(\n\/\/   'assets\/images\/test.png', \/\/ \u672c\u5730\u8d44\u6e90\u8def\u5f84\uff08\u9700\u5728pubspec.yaml\u914d\u7f6e\uff09\n\/\/   width: 200,\n\/\/   height: 150,\n\/\/   fit: BoxFit.contain,\n\/\/ );<\/code><\/pre>\n\n\n\n
                                  TextField<\/h2>\n\n\n\n
                                  \u8bf4\u660e\uff1aTextField<\/code> \u662f\u6587\u672c\u8f93\u5165\u6846\uff0c\u901a\u5e38\u914d\u5408 TextEditingController<\/code> \u4f7f\u7528\u3002<\/p>\n\n\n\n
                                  \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                    \n
                                  • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                  • controller<\/code> – \u6587\u672c\u63a7\u5236\u5668\uff08TextEditingController\uff09\u3002<\/li>\n\n\n\n
                                  • focusNode<\/code> – \u7126\u70b9\u8282\u70b9\uff08FocusNode\uff09\u3002<\/li>\n\n\n\n
                                  • decoration<\/code> – \u8f93\u5165\u88c5\u9970\uff08InputDecoration\uff0c\u4f8b\u5982 labelText\u3001hintText\u3001border\uff09\u3002<\/li>\n\n\n\n
                                  • keyboardType<\/code> – \u952e\u76d8\u7c7b\u578b\uff08TextInputType\uff09\u3002<\/li>\n\n\n\n
                                  • textInputAction<\/code> – \u8f93\u5165\u52a8\u4f5c\uff08TextInputAction\uff09\u3002<\/li>\n\n\n\n
                                  • textCapitalization<\/code> – \u81ea\u52a8\u5927\u5199\uff08TextCapitalization\uff09\u3002<\/li>\n\n\n\n
                                  • style<\/code> – \u6587\u672c\u6837\u5f0f\uff08TextStyle\uff09\u3002<\/li>\n\n\n\n
                                  • strutStyle<\/code> – StrutStyle\u3002<\/li>\n\n\n\n
                                  • textAlign<\/code> – \u6587\u672c\u5bf9\u9f50\uff08TextAlign\uff09\u3002<\/li>\n\n\n\n
                                  • textAlignVertical<\/code> – \u6587\u672c\u5782\u76f4\u5bf9\u9f50\uff08TextAlignVertical\uff09\u3002<\/li>\n\n\n\n
                                  • autofocus<\/code> – \u81ea\u52a8\u83b7\u5f97\u7126\u70b9\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • readOnly<\/code> – \u53ea\u8bfb\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • toolbarOptions<\/code> – \u5de5\u5177\u680f\u9009\u9879\uff08ToolbarOptions\uff09\u3002<\/li>\n\n\n\n
                                  • showCursor<\/code> – \u662f\u5426\u663e\u793a\u5149\u6807\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • obscureText<\/code> – \u5bc6\u6587\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • autocorrect<\/code> – \u81ea\u52a8\u66f4\u6b63\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • enableSuggestions<\/code> – \u542f\u7528\u5efa\u8bae\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • maxLines<\/code> – \u6700\u5927\u884c\u6570\uff08int\uff09\u3002<\/li>\n\n\n\n
                                  • minLines<\/code> – \u6700\u5c0f\u884c\u6570\uff08int\uff09\u3002<\/li>\n\n\n\n
                                  • expands<\/code> – \u662f\u5426\u5c55\u5f00\u586b\u6ee1\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • maxLength<\/code> – \u6700\u5927\u957f\u5ea6\uff08int\uff09\u3002<\/li>\n\n\n\n
                                  • onChanged<\/code> – \u6587\u672c\u53d8\u5316\u56de\u8c03\uff08ValueChanged\uff09\u3002<\/li>\n\n\n\n
                                  • onEditingComplete<\/code> – \u7f16\u8f91\u5b8c\u6210\u56de\u8c03\uff08VoidCallback\uff09\u3002<\/li>\n\n\n\n
                                  • onSubmitted<\/code> – \u63d0\u4ea4\u56de\u8c03\uff08ValueChanged\uff09\u3002<\/li>\n\n\n\n
                                  • inputFormatters<\/code> – \u8f93\u5165\u683c\u5f0f\u5316\uff08List\uff09\u3002<\/li>\n\n\n\n
                                  • enabled<\/code> – \u662f\u5426\u542f\u7528\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                  • cursorWidth<\/code> – \u5149\u6807\u5bbd\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
                                  • cursorHeight<\/code> – \u5149\u6807\u9ad8\u5ea6\uff08double\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                    \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                    \/\/ \u7b2c\u4e00\u6b65\uff1a\u5b9a\u4e49\u6587\u672c\u63a7\u5236\u5668\uff08\u7528\u4e8e\u63a7\u5236\/\u83b7\u53d6\u8f93\u5165\u5185\u5bb9\uff09\nfinal TextEditingController _textController = TextEditingController(text: '\u521d\u59cb\u503c');\n\/\/ \u7b2c\u4e8c\u6b65\uff1a\u5b9a\u4e49\u7126\u70b9\u8282\u70b9\uff08\u63a7\u5236\u8f93\u5165\u6846\u7126\u70b9\uff09\nfinal FocusNode _focusNode = FocusNode();\n\n\/\/ \u8f93\u5165\u6846\u7ec4\u4ef6\nTextField(\n  key: const Key('text_field'), \/\/ \u552f\u4e00\u6807\u8bc6\n  controller: _textController, \/\/ \u6587\u672c\u63a7\u5236\u5668\uff08\u6838\u5fc3\uff09\n  focusNode: _focusNode, \/\/ \u7126\u70b9\u8282\u70b9\n  decoration: InputDecoration( \/\/ \u8f93\u5165\u6846\u88c5\u9970\uff08\u6837\u5f0f\uff09\n    labelText: '\u7528\u6237\u540d', \/\/ \u6807\u7b7e\u6587\u672c\n    hintText: '\u8bf7\u8f93\u5165\u7528\u6237\u540d', \/\/ \u63d0\u793a\u6587\u672c\uff08\u5360\u4f4d\u7b26\uff09\n    prefixIcon: const Icon(Icons.person), \/\/ \u5de6\u4fa7\u56fe\u6807\n    suffixIcon: const Icon(Icons.clear), \/\/ \u53f3\u4fa7\u56fe\u6807\n    border: const OutlineInputBorder( \/\/ \u8fb9\u6846\u6837\u5f0f\n      borderRadius: BorderRadius.all(Radius.circular(8)),\n    ),\n    enabledBorder: const OutlineInputBorder( \/\/ \u672a\u6fc0\u6d3b\u65f6\u8fb9\u6846\n      borderSide: BorderSide(color: Colors.grey),\n    ),\n    focusedBorder: const OutlineInputBorder( \/\/ \u6fc0\u6d3b\u65f6\u8fb9\u6846\n      borderSide: BorderSide(color: Colors.blue),\n    ),\n    errorText: '\u8f93\u5165\u683c\u5f0f\u9519\u8bef', \/\/ \u9519\u8bef\u63d0\u793a\u6587\u672c\n    helperText: '\u8bf7\u8f93\u51656-12\u4f4d\u5b57\u6bcd\u6216\u6570\u5b57', \/\/ \u8f85\u52a9\u8bf4\u660e\u6587\u672c\n    contentPadding: const EdgeInsets.all(12), \/\/ \u5185\u8fb9\u8ddd\n  ),\n  keyboardType: TextInputType.text, \/\/ \u952e\u76d8\u7c7b\u578b\uff08text=\u6587\u672c\uff0cnumber=\u6570\u5b57\uff0cemail=\u90ae\u7bb1\uff09\n  textInputAction: TextInputAction.next, \/\/ \u952e\u76d8\u56de\u8f66\u6309\u94ae\u6837\u5f0f\uff08next=\u4e0b\u4e00\u9879\uff0cdone=\u5b8c\u6210\uff09\n  textCapitalization: TextCapitalization.none, \/\/ \u81ea\u52a8\u5927\u5199\uff08none=\u4e0d\u5927\u5199\uff0cwords=\u5355\u8bcd\u9996\u5b57\u6bcd\uff09\n  style: const TextStyle(fontSize: 16, color: Colors.black), \/\/ \u8f93\u5165\u6587\u672c\u6837\u5f0f\n  strutStyle: const StrutStyle(), \/\/ \u6587\u672c\u652f\u6491\u6837\u5f0f\n  textAlign: TextAlign.left, \/\/ \u6587\u672c\u5bf9\u9f50\n  textAlignVertical: TextAlignVertical.center, \/\/ \u6587\u672c\u5782\u76f4\u5bf9\u9f50\n  autofocus: false, \/\/ \u662f\u5426\u81ea\u52a8\u83b7\u53d6\u7126\u70b9\n  readOnly: false, \/\/ \u662f\u5426\u53ea\u8bfb\n  toolbarOptions: const ToolbarOptions( \/\/ \u957f\u6309\u5de5\u5177\u680f\u9009\u9879\n    copy: true,\n    cut: true,\n    paste: true,\n    selectAll: true,\n  ),\n  showCursor: true, \/\/ \u662f\u5426\u663e\u793a\u5149\u6807\n  cursorWidth: 2.0, \/\/ \u5149\u6807\u5bbd\u5ea6\n  cursorHeight: 20.0, \/\/ \u5149\u6807\u9ad8\u5ea6\n  cursorColor: Colors.blue, \/\/ \u5149\u6807\u989c\u8272\n  obscureText: false, \/\/ \u662f\u5426\u9690\u85cf\u8f93\u5165\uff08\u5bc6\u7801\u6846\u7528true\uff09\n  autocorrect: true, \/\/ \u662f\u5426\u81ea\u52a8\u66f4\u6b63\uff08\u82f1\u6587\uff09\n  enableSuggestions: true, \/\/ \u662f\u5426\u542f\u7528\u8f93\u5165\u5efa\u8bae\n  maxLines: 1, \/\/ \u6700\u5927\u884c\u6570\uff081=\u5355\u884c\uff0cnull=\u591a\u884c\uff09\n  minLines: 1, \/\/ \u6700\u5c0f\u884c\u6570\n  expands: false, \/\/ \u662f\u5426\u586b\u6ee1\u7236\u5bb9\u5668\uff08\u9700\u914d\u5408maxLines=null\u4f7f\u7528\uff09\n  maxLength: 12, \/\/ \u6700\u5927\u8f93\u5165\u957f\u5ea6\uff08\u663e\u793a\u8ba1\u6570\u5668\uff09\n  maxLengthEnforcement: MaxLengthEnforcement.enforced, \/\/ \u5f3a\u5236\u9650\u5236\u6700\u5927\u957f\u5ea6\n  onChanged: (value) { \/\/ \u6587\u672c\u53d8\u5316\u56de\u8c03\n    print('\u8f93\u5165\u5185\u5bb9\uff1a$value');\n  },\n  onEditingComplete: () { \/\/ \u7f16\u8f91\u5b8c\u6210\u56de\u8c03\uff08\u952e\u76d8done\/next\uff09\n    _focusNode.unfocus(); \/\/ \u5931\u53bb\u7126\u70b9\n  },\n  onSubmitted: (value) { \/\/ \u63d0\u4ea4\u56de\u8c03\uff08\u70b9\u51fb\u56de\u8f66\uff09\n    print('\u63d0\u4ea4\u5185\u5bb9\uff1a$value');\n  },\n  inputFormatters: [ \/\/ \u8f93\u5165\u683c\u5f0f\u5316\uff08\u9650\u5236\u8f93\u5165\u5185\u5bb9\uff09\n    FilteringTextInputFormatter.allow(RegExp(r'[a-zA-Z0-9]')), \/\/ \u4ec5\u5141\u8bb8\u5b57\u6bcd\u6570\u5b57\n  ],\n  enabled: true, \/\/ \u662f\u5426\u542f\u7528\u8f93\u5165\u6846\n);\n\n\/\/ \u6ce8\u610f\uff1aStatefulWidget\u4e2d\u9700\u91ca\u653e\u8d44\u6e90\n\/\/ @override\n\/\/ void dispose() {\n\/\/   _textController.dispose();\n\/\/   _focusNode.dispose();\n\/\/   super.dispose();\n\/\/ }<\/code><\/pre>\n\n\n\n
                                    SingleChildScrollView<\/h2>\n\n\n\n
                                    \u8bf4\u660e\uff1aSingleChildScrollView<\/code> \u9002\u7528\u4e8e\u53ea\u6709\u4e00\u4e2a\u5b50\u5143\u7d20\u4f46\u9700\u8981\u6eda\u52a8\u7684\u573a\u666f\u3002<\/p>\n\n\n\n
                                    \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                      \n
                                    • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                    • scrollDirection<\/code> – \u6eda\u52a8\u65b9\u5411\uff08Axis\uff09\u3002<\/li>\n\n\n\n
                                    • reverse<\/code> – \u662f\u5426\u53cd\u5411\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                    • padding<\/code> – \u5185\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
                                    • primary<\/code> – \u662f\u5426\u4f5c\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                    • physics<\/code> – \u6eda\u52a8\u7269\u7406\uff08ScrollPhysics\uff09\u3002<\/li>\n\n\n\n
                                    • controller<\/code> – \u6eda\u52a8\u63a7\u5236\u5668\uff08ScrollController\uff09\u3002<\/li>\n\n\n\n
                                    • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n\n\n\n
                                    • child<\/code> – \u5b50\u7ec4\u4ef6\uff08\u901a\u5e38\u4e3a Column\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                      \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                      SingleChildScrollView(\n  key: const Key('scroll_view'), \/\/ \u552f\u4e00\u6807\u8bc6\n  scrollDirection: Axis.vertical, \/\/ \u6eda\u52a8\u65b9\u5411\uff08vertical=\u5782\u76f4\uff0chorizontal=\u6c34\u5e73\uff09\n  reverse: false, \/\/ \u662f\u5426\u53cd\u5411\u6eda\u52a8\uff08true=\u4ece\u5e95\u90e8\/\u53f3\u4fa7\u5f00\u59cb\uff09\n  padding: const EdgeInsets.all(16), \/\/ \u5185\u8fb9\u8ddd\n  primary: true, \/\/ \u662f\u5426\u4f5c\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\uff08\u914d\u5408Scaffold\u4f7f\u7528\uff0c\u5904\u7406\u72b6\u6001\u680f\uff09\n  physics: const AlwaysScrollableScrollPhysics(), \/\/ \u6eda\u52a8\u7269\u7406\uff08AlwaysScrollable=\u59cb\u7ec8\u53ef\u6eda\uff0cBouncing=\u5f39\u6027\uff09\n  controller: ScrollController(), \/\/ \u6eda\u52a8\u63a7\u5236\u5668\uff08\u76d1\u542c\/\u63a7\u5236\u6eda\u52a8\u4f4d\u7f6e\uff09\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\n  \/\/ \u5b50\u7ec4\u4ef6\uff08\u901a\u5e38\u662fColumn\/Row\uff0c\u5185\u5bb9\u8d85\u51fa\u7236\u5bb9\u5668\u65f6\u53ef\u6eda\u52a8\uff09\n  child: Column(\n    children: List.generate(30, (index) {\n      return ListTile(\n        title: Text('\u6eda\u52a8\u6761\u76ee $index'),\n        leading: const Icon(Icons.list),\n      );\n    }),\n  ),\n);<\/code><\/pre>\n\n\n\n
                                      ListView<\/h2>\n\n\n\n
                                      \u8bf4\u660e\uff1aListView<\/code> \u662f\u5e38\u7528\u6eda\u52a8\u5217\u8868\uff0cListView.builder<\/code> \u66f4\u9ad8\u6548\u7528\u4e8e\u5927\u91cf\u5b50\u9879\u3002<\/p>\n\n\n\n
                                      \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                        \n
                                      • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                      • scrollDirection<\/code> – \u6eda\u52a8\u65b9\u5411\uff08Axis\uff09\u3002<\/li>\n\n\n\n
                                      • reverse<\/code> – \u662f\u5426\u53cd\u5411\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • controller<\/code> – \u6eda\u52a8\u63a7\u5236\u5668\uff08ScrollController\uff09\u3002<\/li>\n\n\n\n
                                      • primary<\/code> – \u662f\u5426\u4f5c\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • physics<\/code> – \u6eda\u52a8\u7269\u7406\uff08ScrollPhysics\uff09\u3002<\/li>\n\n\n\n
                                      • shrinkWrap<\/code> – \u662f\u5426\u5305\u88f9\u5185\u5bb9\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • padding<\/code> – \u5185\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
                                      • itemExtent<\/code> – \u56fa\u5b9a\u5b50\u9879\u9ad8\u5ea6\uff08double\uff09\u3002<\/li>\n\n\n\n
                                      • prototypeItem<\/code> – \u539f\u578b\u5b50\u9879\uff08Widget\uff0c\u7528\u4e8e\u6d4b\u91cf\uff09\u3002<\/li>\n\n\n\n
                                      • cacheExtent<\/code> – \u7f13\u5b58\u8303\u56f4\uff08double\uff09\u3002<\/li>\n\n\n\n
                                      • itemCount<\/code> – \u9879\u76ee\u6570\u91cf\uff08int\uff0cbuilder \u6a21\u5f0f\uff09\u3002<\/li>\n\n\n\n
                                      • itemBuilder<\/code> – \u6784\u5efa\u5b50\u9879\u7684\u56de\u8c03\uff08IndexedWidgetBuilder\uff09\u3002<\/li>\n\n\n\n
                                      • separatorBuilder<\/code> – \u5206\u9694\u6784\u5efa\u5668\uff08ListView.separated\uff09\u3002<\/li>\n\n\n\n
                                      • addAutomaticKeepAlives<\/code> – \u81ea\u52a8\u4fdd\u6301\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • addRepaintBoundaries<\/code> – \u91cd\u7ed8\u8fb9\u754c\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • addSemanticIndexes<\/code> – \u8bed\u4e49\u7d22\u5f15\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                      • semanticChildCount<\/code> – \u8bed\u4e49\u5b50\u9879\u8ba1\u6570\uff08int\uff09\u3002<\/li>\n\n\n\n
                                      • dragStartBehavior<\/code> – \u62d6\u52a8\u8d77\u59cb\u884c\u4e3a\uff08DragStartBehavior\uff09\u3002<\/li>\n\n\n\n
                                      • keyboardDismissBehavior<\/code> – \u952e\u76d8\u9690\u85cf\u884c\u4e3a\uff08ScrollViewKeyboardDismissBehavior\uff09\u3002<\/li>\n\n\n\n
                                      • restorationId<\/code> – \u6062\u590d ID\uff08String\uff09\u3002<\/li>\n\n\n\n
                                      • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                        \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                        ListView.builder(\n  key: const Key('list_view'), \/\/ \u552f\u4e00\u6807\u8bc6\n  scrollDirection: Axis.vertical, \/\/ \u6eda\u52a8\u65b9\u5411\n  reverse: false, \/\/ \u662f\u5426\u53cd\u5411\u6eda\u52a8\n  controller: ScrollController(), \/\/ \u6eda\u52a8\u63a7\u5236\u5668\n  primary: false, \/\/ \u662f\u5426\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\n  physics: const BouncingScrollPhysics(), \/\/ \u6eda\u52a8\u7269\u7406\uff08iOS\u5f39\u6027\u6548\u679c\uff09\n  shrinkWrap: false, \/\/ \u662f\u5426\u5305\u88f9\u5185\u5bb9\uff08true=\u9ad8\u5ea6\u9002\u5e94\u5b50\u7ec4\u4ef6\uff0cfalse=\u586b\u6ee1\u7236\u5bb9\u5668\uff09\n  padding: const EdgeInsets.all(8), \/\/ \u5185\u8fb9\u8ddd\n  itemExtent: 50.0, \/\/ \u56fa\u5b9a\u5b50\u9879\u9ad8\u5ea6\uff08\u63d0\u5347\u6027\u80fd\uff09\n  prototypeItem: const ListTile(title: Text('\u539f\u578b\u9879')), \/\/ \u539f\u578b\u5b50\u9879\uff08\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\uff09\n  cacheExtent: 100.0, \/\/ \u7f13\u5b58\u8303\u56f4\uff08\u9884\u52a0\u8f7d\u53ef\u89c6\u533a\u57df\u5916100px\uff09\n  itemCount: 20, \/\/ \u5b50\u9879\u6570\u91cf\n  itemBuilder: (context, index) { \/\/ \u5b50\u9879\u6784\u5efa\u5668\n    return ListTile(\n      title: Text('\u5217\u8868\u9879 $index'),\n      subtitle: const Text('\u5b50\u6807\u9898'),\n      leading: const Icon(Icons.check),\n      onTap: () => print('\u70b9\u51fb\u4e86$index\u9879'),\n    );\n  },\n  \/\/ \u5206\u9694\u7ebf\u6784\u5efa\u5668\uff08ListView.separated\u4e13\u7528\uff09\n  \/\/ separatorBuilder: (context, index) => const Divider(height: 1),\n  addAutomaticKeepAlives: true, \/\/ \u81ea\u52a8\u4fdd\u6301\u72b6\u6001\uff08\u907f\u514d\u91cd\u5efa\uff09\n  addRepaintBoundaries: true, \/\/ \u6dfb\u52a0\u91cd\u7ed8\u8fb9\u754c\uff08\u63d0\u5347\u6027\u80fd\uff09\n  addSemanticIndexes: true, \/\/ \u6dfb\u52a0\u8bed\u4e49\u7d22\u5f15\uff08\u65e0\u969c\u788d\uff09\n  semanticChildCount: 20, \/\/ \u8bed\u4e49\u5b50\u9879\u6570\u91cf\n  dragStartBehavior: DragStartBehavior.start, \/\/ \u62d6\u52a8\u89e6\u53d1\u65b9\u5f0f\n  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, \/\/ \u62d6\u52a8\u65f6\u9690\u85cf\u952e\u76d8\n  restorationId: 'list_view_id', \/\/ \u6062\u590dID\uff08\u4fdd\u5b58\u6eda\u52a8\u4f4d\u7f6e\uff09\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\n);<\/code><\/pre>\n\n\n\n
                                        GridView<\/h2>\n\n\n\n
                                        \u8bf4\u660e\uff1aGridView<\/code> \u7528\u4e8e\u7f51\u683c\u5e03\u5c40\uff0c\u53ef\u901a\u8fc7 GridView.count<\/code> \u6216 GridView.builder<\/code> \u521b\u5efa\u3002<\/p>\n\n\n\n
                                        \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                          \n
                                        • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                        • scrollDirection<\/code> – \u6eda\u52a8\u65b9\u5411\uff08Axis\uff09\u3002<\/li>\n\n\n\n
                                        • reverse<\/code> – \u662f\u5426\u53cd\u5411\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                        • controller<\/code> – \u6eda\u52a8\u63a7\u5236\u5668\uff08ScrollController\uff09\u3002<\/li>\n\n\n\n
                                        • primary<\/code> – \u662f\u5426\u4f5c\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                        • physics<\/code> – \u6eda\u52a8\u7269\u7406\uff08ScrollPhysics\uff09\u3002<\/li>\n\n\n\n
                                        • shrinkWrap<\/code> – \u662f\u5426\u5305\u88f9\u5185\u5bb9\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                        • padding<\/code> – \u5185\u8fb9\u8ddd\uff08EdgeInsets\uff09\u3002<\/li>\n\n\n\n
                                        • gridDelegate<\/code> – \u7f51\u683c\u59d4\u6258\uff08SliverGridDelegate\uff0c\u4f8b\u5982 SliverGridDelegateWithFixedCrossAxisCount\uff09\u3002<\/li>\n\n\n\n
                                        • children<\/code> – \u5b50\u7ec4\u4ef6\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
                                        • cacheExtent<\/code> – \u7f13\u5b58\u8303\u56f4\uff08double\uff09\u3002<\/li>\n\n\n\n
                                        • semanticChildCount<\/code> – \u8bed\u4e49\u5b50\u9879\u8ba1\u6570\uff08int\uff09\u3002<\/li>\n\n\n\n
                                        • dragStartBehavior<\/code> – \u62d6\u52a8\u8d77\u59cb\u884c\u4e3a\uff08DragStartBehavior\uff09\u3002<\/li>\n\n\n\n
                                        • keyboardDismissBehavior<\/code> – \u952e\u76d8\u9690\u85cf\u884c\u4e3a\uff08ScrollViewKeyboardDismissBehavior\uff09\u3002<\/li>\n\n\n\n
                                        • restorationId<\/code> – \u6062\u590d ID\uff08String\uff09\u3002<\/li>\n\n\n\n
                                        • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                          \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                          GridView.count(\n  key: const Key('grid_view'), \/\/ \u552f\u4e00\u6807\u8bc6\n  scrollDirection: Axis.vertical, \/\/ \u6eda\u52a8\u65b9\u5411\n  reverse: false, \/\/ \u662f\u5426\u53cd\u5411\u6eda\u52a8\n  controller: ScrollController(), \/\/ \u6eda\u52a8\u63a7\u5236\u5668\n  primary: false, \/\/ \u662f\u5426\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\n  physics: const ClampingScrollPhysics(), \/\/ \u6eda\u52a8\u7269\u7406\uff08Android\u963b\u5c3c\u6548\u679c\uff09\n  shrinkWrap: false, \/\/ \u662f\u5426\u5305\u88f9\u5185\u5bb9\n  padding: const EdgeInsets.all(8), \/\/ \u5185\u8fb9\u8ddd\n  crossAxisCount: 3, \/\/ \u5217\u6570\uff08\u6838\u5fc3\u5c5e\u6027\uff09\n  crossAxisSpacing: 8.0, \/\/ \u5217\u95f4\u8ddd\n  mainAxisSpacing: 8.0, \/\/ \u884c\u95f4\u8ddd\n  childAspectRatio: 1.0, \/\/ \u5b50\u9879\u5bbd\u9ad8\u6bd4\uff081:1=\u6b63\u65b9\u5f62\uff09\n  \/\/ \u7f51\u683c\u59d4\u6258\uff08\u53e6\u4e00\u79cd\u914d\u7f6e\u65b9\u5f0f\uff0c\u4e0ecount\u4e8c\u9009\u4e00\uff09\n  \/\/ gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(\n  \/\/   crossAxisCount: 3,\n  \/\/   crossAxisSpacing: 8,\n  \/\/   mainAxisSpacing: 8,\n  \/\/ ),\n  children: List.generate(9, (index) { \/\/ \u5b50\u7ec4\u4ef6\u5217\u8868\n    return Container(\n      color: Colors.blue[100 * (index % 9)],\n      alignment: Alignment.center,\n      child: Text('\u7f51\u683c\u9879 $index'),\n    );\n  }),\n  cacheExtent: 100.0, \/\/ \u7f13\u5b58\u8303\u56f4\n  semanticChildCount: 9, \/\/ \u8bed\u4e49\u5b50\u9879\u6570\u91cf\n  dragStartBehavior: DragStartBehavior.start, \/\/ \u62d6\u52a8\u89e6\u53d1\u65b9\u5f0f\n  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, \/\/ \u62d6\u52a8\u9690\u85cf\u952e\u76d8\n  restorationId: 'grid_view_id', \/\/ \u6062\u590dID\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\n);<\/code><\/pre>\n\n\n\n
                                          CustomScrollView<\/h2>\n\n\n\n
                                          \u8bf4\u660e\uff1aCustomScrollView<\/code> \u53ef\u7ec4\u5408\u591a\u4e2a sliver\uff0c\u5b9e\u73b0\u590d\u6742\u7684\u6eda\u52a8\u6548\u679c\uff08\u5982\u7c98\u6027\u6807\u9898\u3001\u4f38\u7f29 appbar \u7b49\uff09\u3002<\/p>\n\n\n\n
                                          \u5c5e\u6027\uff08\u5e38\u89c1 Sliver\uff09\uff1a<\/p>\n\n\n\n
                                            \n
                                          • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                          • scrollDirection<\/code> – \u6eda\u52a8\u65b9\u5411\uff08Axis\uff09\u3002<\/li>\n\n\n\n
                                          • reverse<\/code> – \u662f\u5426\u53cd\u5411\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                          • controller<\/code> – \u6eda\u52a8\u63a7\u5236\u5668\uff08ScrollController\uff09\u3002<\/li>\n\n\n\n
                                          • primary<\/code> – \u662f\u5426\u4f5c\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                          • physics<\/code> – \u6eda\u52a8\u7269\u7406\uff08ScrollPhysics\uff09\u3002<\/li>\n\n\n\n
                                          • shrinkWrap<\/code> – \u662f\u5426\u5305\u88f9\u5185\u5bb9\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                          • center<\/code> – \u6eda\u52a8\u4e2d\u5fc3\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                          • anchor<\/code> – \u951a\u70b9\uff08double\uff09\u3002<\/li>\n\n\n\n
                                          • cacheExtent<\/code> – \u7f13\u5b58\u8303\u56f4\uff08double\uff09\u3002<\/li>\n\n\n\n
                                          • restorationId<\/code> – \u6062\u590d ID\uff08String\uff09\u3002<\/li>\n\n\n\n
                                          • clipBehavior<\/code> – \u88c1\u526a\u884c\u4e3a\uff08Clip\uff09\u3002<\/li>\n\n\n\n
                                          • SliverAppBar<\/code> – \u53ef\u4f38\u7f29\u7684 app bar\uff08\u5c5e\u6027\u5982 pinned\u3001expandedHeight\uff09\u3002<\/li>\n\n\n\n
                                          • SliverList<\/code> – \u5217\u8868\u7684 sliver \u7248\u672c\uff08\u4f7f\u7528 SliverChildDelegate\uff09\u3002<\/li>\n\n\n\n
                                          • SliverGrid<\/code> – \u7f51\u683c\u7684 sliver \u7248\u672c\u3002<\/li>\n<\/ul>\n\n\n\n
                                            \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                            CustomScrollView(\n  key: const Key('custom_scroll_view'), \/\/ \u552f\u4e00\u6807\u8bc6\n  scrollDirection: Axis.vertical, \/\/ \u6eda\u52a8\u65b9\u5411\n  reverse: false, \/\/ \u662f\u5426\u53cd\u5411\u6eda\u52a8\n  controller: ScrollController(), \/\/ \u6eda\u52a8\u63a7\u5236\u5668\n  primary: false, \/\/ \u662f\u5426\u4e3a\u4e3b\u6eda\u52a8\u89c6\u56fe\n  physics: const AlwaysScrollableScrollPhysics(), \/\/ \u6eda\u52a8\u7269\u7406\n  shrinkWrap: false, \/\/ \u662f\u5426\u5305\u88f9\u5185\u5bb9\n  center: const Key('sliver_center'), \/\/ \u6eda\u52a8\u4e2d\u5fc3\uff08\u6307\u5b9asliver\u7684key\uff09\n  anchor: 0.0, \/\/ \u951a\u70b9\uff080=\u9876\u90e8\uff0c1=\u5e95\u90e8\uff09\n  cacheExtent: 100.0, \/\/ \u7f13\u5b58\u8303\u56f4\n  restorationId: 'custom_scroll_id', \/\/ \u6062\u590dID\n  clipBehavior: Clip.hardEdge, \/\/ \u88c1\u526a\u65b9\u5f0f\n  \/\/ Sliver\u5217\u8868\uff08\u6838\u5fc3\uff1a\u7ec4\u5408\u591a\u79cd\u6eda\u52a8\u7ec4\u4ef6\uff09\n  slivers: [\n    \/\/ \u53ef\u4f38\u7f29AppBar\n    SliverAppBar(\n      title: const Text('CustomScrollView'),\n      pinned: true, \/\/ \u56fa\u5b9a\u5728\u9876\u90e8\n      floating: true, \/\/ \u4e0a\u6ed1\u663e\u793a\uff0c\u4e0b\u6ed1\u9690\u85cf\n      expandedHeight: 200.0, \/\/ \u5c55\u5f00\u9ad8\u5ea6\n      flexibleSpace: const FlexibleSpaceBar(\n        background: Image(\n          image: NetworkImage('https:\/\/example.com\/bg.jpg'),\n          fit: BoxFit.cover,\n        ),\n      ),\n    ),\n    \/\/ \u7f51\u683cSliver\n    SliverGrid(\n      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(\n        crossAxisCount: 2,\n        crossAxisSpacing: 8,\n        mainAxisSpacing: 8,\n        childAspectRatio: 1.5,\n      ),\n      delegate: SliverChildBuilderDelegate(\n        (context, index) => Container(\n          color: Colors.green[100 * (index % 9)],\n          alignment: Alignment.center,\n          child: Text('\u7f51\u683c\u9879 $index'),\n        ),\n        childCount: 6,\n      ),\n    ),\n    \/\/ \u5217\u8868Sliver\n    SliverList(\n      delegate: SliverChildBuilderDelegate(\n        (context, index) => ListTile(\n          title: Text('\u5217\u8868\u9879 $index'),\n          leading: const Icon(Icons.list),\n        ),\n        childCount: 20,\n      ),\n    ),\n    \/\/ \u5206\u9694\u7ebfSliver\n    const SliverToBoxAdapter(\n      child: Divider(height: 1, color: Colors.grey),\n    ),\n    \/\/ \u56fa\u5b9a\u9ad8\u5ea6Sliver\n    const SliverToBoxAdapter(\n      child: SizedBox(height: 50, child: Center(child: Text('\u56fa\u5b9a\u9ad8\u5ea6\u533a\u57df'))),\n    ),\n  ],\n);<\/code><\/pre>\n\n\n\n
                                            PageView<\/h2>\n\n\n\n
                                            \u8bf4\u660e\uff1aPageView<\/code> \u7528\u4e8e\u9875\u9762\u7ffb\u9875\uff08\u8f6e\u64ad\u6216\u5206\u9875\u89c6\u56fe\uff09\u3002<\/p>\n\n\n\n
                                            \u5c5e\u6027\uff1a<\/p>\n\n\n\n
                                              \n
                                            • key<\/code> – Widget \u7684 key\uff08Key\uff09\u3002<\/li>\n\n\n\n
                                            • scrollDirection<\/code> – \u6eda\u52a8\u65b9\u5411\uff08Axis\uff09\u3002<\/li>\n\n\n\n
                                            • controller<\/code> – \u9875\u63a7\u5236\u5668\uff08PageController\uff09\u3002<\/li>\n\n\n\n
                                            • physics<\/code> – \u6eda\u52a8\u7269\u7406\uff08ScrollPhysics\uff09\u3002<\/li>\n\n\n\n
                                            • pageSnapping<\/code> – \u662f\u5426\u81ea\u52a8\u5bf9\u9f50\u5230\u9875\u9762\uff08bool\uff09\u3002<\/li>\n\n\n\n
                                            • onPageChanged<\/code> – \u9875\u9762\u53d8\u5316\u56de\u8c03\uff08ValueChanged\uff09\u3002<\/li>\n\n\n\n
                                            • children<\/code> – \u9875\u9762\u5217\u8868\uff08List\uff09\u3002<\/li>\n\n\n\n
                                            • allowImplicitScrolling<\/code> – \u662f\u5426\u5141\u8bb8\u9690\u5f0f\u6eda\u52a8\uff08bool\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
                                              \u793a\u4f8b\uff1a<\/p>\n\n\n\n
                                              \/\/ \u7b2c\u4e00\u6b65\uff1a\u5b9a\u4e49\u9875\u9762\u63a7\u5236\u5668\uff08\u63a7\u5236\u9875\u7801\/\u6eda\u52a8\uff09\nfinal PageController _pageController = PageController(\n  initialPage: 0, \/\/ \u521d\u59cb\u9875\u7801\n  viewportFraction: 0.8, \/\/ \u89c6\u53e3\u6bd4\u4f8b\uff080.8=\u6bcf\u9875\u663e\u793a80%\uff0c\u5b9e\u73b0\u5361\u7247\u8f6e\u64ad\u6548\u679c\uff09\n);\n\n\/\/ \u9875\u9762\u89c6\u56fe\u7ec4\u4ef6\nPageView(\n  key: const Key('page_view'), \/\/ \u552f\u4e00\u6807\u8bc6\n  scrollDirection: Axis.horizontal, \/\/ \u6eda\u52a8\u65b9\u5411\uff08horizontal=\u6c34\u5e73\uff0cvertical=\u5782\u76f4\uff09\n  controller: _pageController, \/\/ \u9875\u9762\u63a7\u5236\u5668\n  physics: const PageScrollPhysics(), \/\/ \u6eda\u52a8\u7269\u7406\uff08PageScroll=\u7ffb\u9875\u6548\u679c\uff09\n  pageSnapping: true, \/\/ \u662f\u5426\u81ea\u52a8\u5bf9\u9f50\u5230\u9875\u9762\uff08true=\u7ffb\u9875\u540e\u5c45\u4e2d\uff09\n  onPageChanged: (index) { \/\/ \u9875\u9762\u5207\u6362\u56de\u8c03\n    print('\u5f53\u524d\u9875\u7801\uff1a$index');\n  },\n  children: [ \/\/ \u9875\u9762\u5217\u8868\n    Container(\n      color: Colors.red,\n      alignment: Alignment.center,\n      child: const Text('\u9875\u97621', style: TextStyle(fontSize: 30, color: Colors.white)),\n    ),\n    Container(\n      color: Colors.green,\n      alignment: Alignment.center,\n      child: const Text('\u9875\u97622', style: TextStyle(fontSize: 30, color: Colors.white)),\n    ),\n    Container(\n      color: Colors.blue,\n      alignment: Alignment.center,\n      child: const Text('\u9875\u97623', style: TextStyle(fontSize: 30, color: Colors.white)),\n    ),\n  ],\n  allowImplicitScrolling: false, \/\/ \u662f\u5426\u5141\u8bb8\u9690\u5f0f\u6eda\u52a8\n  \/\/ \u65e0\u9650\u8f6e\u64ad\u53ef\u914d\u5408PageView.builder\u4f7f\u7528\n  \/\/ itemCount: 3,\n  \/\/ itemBuilder: (context, index) => Container(...),\n);\n\n\/\/ \u6ce8\u610f\uff1aStatefulWidget\u4e2d\u91ca\u653e\u63a7\u5236\u5668\n\/\/ @override\n\/\/ void dispose() {\n\/\/   _pageController.dispose();\n\/\/   super.dispose();\n\/\/ }<\/code><\/pre>\n\n\n\n
                                              <\/p>\n","protected":false},"excerpt":{"rendered":"
                                              Flutter \u7ec4\u4ef6\u5c5e\u6027\u901f\u67e5 \u76ee\u5f55 MaterialApp \u5c5e\u6027\uff1a \u793a\u4f8b\uff1a Scaffold \u8bf4\u660e\uff1aScaff […]<\/p>\n","protected":false},"author":1,"featured_media":422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.linerroom.cn\/wp-content\/uploads\/2026\/01\/image-3.png?fit=1195%2C732&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=417"}],"version-history":[{"count":11,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions\/448"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=\/wp\/v2\/media\/422"}],"wp:attachment":[{"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.linerroom.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}