{"id":191146,"date":"2023-07-13T19:39:45","date_gmt":"2023-07-13T11:39:45","guid":{"rendered":"https:\/\/www.idc.net\/help\/191146\/"},"modified":"2023-07-13T19:39:45","modified_gmt":"2023-07-13T11:39:45","slug":"%e5%90%8e%e6%b5%aa%e4%ba%91flutter%e6%95%99%e7%a8%8b%ef%bc%9aflutter-%e6%9e%84%e5%bb%ba%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/191146\/","title":{"rendered":"\u540e\u6d6a\u4e91Flutter\u6559\u7a0b\uff1aFlutter \u6784\u5efa\u5e03\u5c40"},"content":{"rendered":"<h2><span style=\"font-family: inherit;font-size: 24px\">\u7b2c0\u6b65: \u8bbe\u7f6e<\/span><br \/><\/h2>\n<p>\u9996\u5148, \u83b7\u53d6\u4ee3\u7801:<\/p>\n<ul>\n<li>\u786e\u4fdd\u60a8\u5df2\u7ecf\u5b89\u88c5\u597d\u4e86&nbsp;set up&nbsp;\u60a8\u7684Flutter\u73af\u5883.<\/li>\n<li>\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u7684Flutter\u5e94\u7528\u7a0b\u5e8f.<\/li>\n<\/ul>\n<p>\u63a5\u4e0b\u6765\uff0c\u5c06\u56fe\u50cf\u6dfb\u52a0\u5230\u793a\u4f8b\u4e2d\uff1a<\/p>\n<ul>\n<li>\u5728\u5de5\u7a0b\u6839\u76ee\u5f55\u521b\u5efa\u4e00\u4e2a&nbsp;images&nbsp;\u6587\u4ef6\u5939.<\/li>\n<li>\u6dfb\u52a0\u4e00\u5f20\u56fe\u7247. (\u8bf7\u6ce8\u610f\uff0cwget\u4e0d\u80fd\u4fdd\u5b58\u6b64\u4e8c\u8fdb\u5236\u6587\u4ef6\u3002)<\/li>\n<li>\u66f4\u65b0&nbsp;pubspec.yaml&nbsp;\u6587\u4ef6\u4ee5\u5305\u542b&nbsp;assets&nbsp;\u6807\u7b7e. \u8fd9\u6837\u624d\u4f1a\u4f7f\u60a8\u7684\u56fe\u7247\u5728\u4ee3\u7801\u4e2d\u53ef\u7528\u3002<\/li>\n<\/ul>\n<p><\/p>\n<h3>\u7b2c\u4e00\u6b65: \u7ed8\u5236\u5e03\u5c40\u56fe<\/h3>\n<p>\u7b2c\u4e00\u6b65\u662f\u5c06\u5e03\u5c40\u62c6\u5206\u6210\u57fa\u672c\u7684\u5143\u7d20\uff1a<\/p>\n<ul>\n<li>\u627e\u51fa\u884c\u548c\u5217.<\/li>\n<li>\u5e03\u5c40\u5305\u542b\u7f51\u683c\u5417?<\/li>\n<li>\u6709\u91cd\u53e0\u7684\u5143\u7d20\u5417?<\/li>\n<li>\u662f\u5426\u9700\u8981\u9009\u9879\u5361?<\/li>\n<li>\u6ce8\u610f\u9700\u8981\u5bf9\u9f50\u3001\u586b\u5145\u548c\u8fb9\u6846\u7684\u533a\u57df.<\/li>\n<\/ul>\n<p>\u9996\u5148\uff0c\u786e\u5b9a\u66f4\u5927\u7684\u5143\u7d20\u3002\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u56db\u4e2a\u5143\u7d20\u6392\u5217\u6210\u4e00\u5217\uff1a\u4e00\u4e2a\u56fe\u50cf\uff0c\u4e24\u4e2a\u884c\u548c\u4e00\u4e2a\u6587\u672c\u5757<\/p>\n<\/p>\n<p>\u63a5\u4e0b\u6765\uff0c\u7ed8\u5236\u6bcf\u4e00\u884c\u3002\u7b2c\u4e00\u884c\u79f0\u5176\u4e3a\u6807\u9898\u90e8\u5206\uff0c\u6709\u4e09\u4e2a\u5b50\u9879\uff1a\u4e00\u5217\u6587\u5b57\uff0c\u4e00\u4e2a\u661f\u5f62\u56fe\u6807\u548c\u4e00\u4e2a\u6570\u5b57\u3002\u5b83\u7684\u7b2c\u4e00\u4e2a\u5b50\u9879\uff0c\u5217\uff0c\u5305\u542b2\u884c\u6587\u5b57\u3002 \u7b2c\u4e00\u5217\u5360\u7528\u5927\u91cf\u7a7a\u95f4\uff0c\u6240\u4ee5\u5b83\u5fc5\u987b\u5305\u88c5\u5728Expanded widget\u4e2d\u3002<\/p>\n<\/p>\n<p>\u7b2c\u4e8c\u884c\u79f0\u5176\u4e3a\u6309\u94ae\u90e8\u5206\uff0c\u4e5f\u67093\u4e2a\u5b50\u9879\uff1a\u6bcf\u4e2a\u5b50\u9879\u90fd\u662f\u4e00\u4e2a\u5305\u542b\u56fe\u6807\u548c\u6587\u672c\u7684\u5217\u3002<\/p>\n<\/p>\n<p>\u4e00\u65e6\u62c6\u5206\u597d\u5e03\u5c40\uff0c\u6700\u7b80\u5355\u7684\u5c31\u662f\u91c7\u53d6\u81ea\u4e0b\u800c\u4e0a\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u5b83\u3002\u4e3a\u4e86\u6700\u5927\u9650\u5ea6\u5730\u51cf\u5c11\u6df1\u5ea6\u5d4c\u5957\u5e03\u5c40\u4ee3\u7801\u7684\u89c6\u89c9\u6df7\u6dc6\uff0c\u5c06\u4e00\u4e9b\u5b9e\u73b0\u653e\u7f6e\u5728\u53d8\u91cf\u548c\u51fd\u6570\u4e2d\u3002<\/p>\n<p><\/p>\n<h3>Step 2: \u5b9e\u73b0\u6807\u9898\u884c<\/h3>\n<p>\u9996\u5148\uff0c\u6784\u5efa\u6807\u9898\u90e8\u5206\u5de6\u8fb9\u680f\u3002\u5c06Column\uff08\u5217\uff09\u653e\u5165Expanded\u4e2d\u4f1a\u62c9\u4f38\u8be5\u5217\u4ee5\u4f7f\u7528\u8be5\u884c\u4e2d\u7684\u6240\u6709\u5269\u4f59\u7a7a\u95f2\u7a7a\u95f4\u3002 \u8bbe\u7f6ecrossAxisAlignment\u5c5e\u6027\u503c\u4e3aCrossAxisAlignment.start\uff0c\u8fd9\u4f1a\u5c06\u8be5\u5217\u4e2d\u7684\u5b50\u9879\u5de6\u5bf9\u9f50\u3002<\/p>\n<p>\u5c06\u7b2c\u4e00\u884c\u6587\u672c\u653e\u5165Container\u4e2d\uff0c\u7136\u540e\u5e95\u90e8\u6dfb\u52a08\u50cf\u7d20\u586b\u5145\u3002\u5217\u4e2d\u7684\u7b2c\u4e8c\u4e2a\u5b50\u9879\uff08\u4e5f\u662f\u6587\u672c\uff09\u663e\u793a\u4e3a\u7070\u8272\u3002<\/p>\n<p>\u6807\u9898\u884c\u4e2d\u7684\u6700\u540e\u4e24\u9879\u662f\u4e00\u4e2a\u7ea2\u8272\u7684\u661f\u5f62\u56fe\u6807\u548c\u6587\u5b57\u201c41\u201d\u3002\u5c06\u6574\u884c\u653e\u5728\u5bb9\u5668\u4e2d\uff0c\u5e76\u6cbf\u7740\u6bcf\u4e2a\u8fb9\u7f18\u586b\u514532\u50cf\u7d20<\/p>\n<p>\u8fd9\u662f\u5b9e\u73b0\u6807\u9898\u884c\u7684\u4ee3\u7801\u3002<\/p>\n<p><strong>Note:<\/strong>&nbsp;If you have problems, you can check your code against&nbsp;<code>lib\/main.dart<\/code>&nbsp;on GitHub.<\/p>\n<pre><code>class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    Widget titleSection = new Container(\n      padding: const EdgeInsets.all(32.0),\n      child: new Row(\n        children: [\n          new Expanded(\n            child: new Column(\n              crossAxisAlignment: CrossAxisAlignment.start,\n              children: [\n                new Container(\n                  padding: const EdgeInsets.only(bottom: 8.0),\n                  child: new Text(\n                    'Oeschinen Lake Campground',\n                    style: new TextStyle(\n                      fontWeight: FontWeight.bold,\n                    ),\n                  ),\n                ),\n                new Text(\n                  'Kandersteg, Switzerland',\n                  style: new TextStyle(\n                    color: Colors.grey[500],\n                  ),\n                ),\n              ],\n            ),\n          ),\n          new Icon(\n            Icons.star,\n            color: Colors.red[500],\n          ),\n          new Text('41'),\n        ],\n      ),\n    );\n  \/\/...\n}<\/code><\/pre>\n<p><i><\/i><strong>\u63d0\u793a:<\/strong>&nbsp;\u5c06\u4ee3\u7801\u7c98\u8d34\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d\u65f6\uff0c\u7f29\u8fdb\u53ef\u80fd\u4f1a\u53d8\u5f62\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u53f3\u952e\u5355\u51fb\uff0c\u9009\u62e9&nbsp;<strong>Reformat with dartfmt<\/strong>&nbsp;\u6765\u5728IntelliJ\u4e2d\u4fee\u590d\u6b64\u95ee\u9898\u3002\u6216\u8005\uff0c\u5728\u547d\u4ee4\u884c\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528&nbsp;dartfmt\u3002<\/p>\n<p><i><\/i><strong>\u63d0\u793a:<\/strong>&nbsp;\u4e3a\u4e86\u83b7\u5f97\u66f4\u5feb\u7684\u5f00\u53d1\u4f53\u9a8c\uff0c\u8bf7\u5c1d\u8bd5\u4f7f\u7528Flutter\u7684\u70ed\u91cd\u8f7d\u529f\u80fd\u3002 \u70ed\u91cd\u8f7d\u5141\u8bb8\u60a8\u4fee\u6539\u4ee3\u7801\u5e76\u67e5\u770b\u66f4\u6539\uff0c\u800c\u65e0\u9700\u5b8c\u5168\u91cd\u65b0\u542f\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002 IntelliJ\u7684Flutter\u63d2\u4ef6\u652f\u6301\u70ed\u91cd\u8f7d\uff0c\u6216\u8005\u60a8\u53ef\u4ee5\u4ece\u547d\u4ee4\u884c\u89e6\u53d1\u3002 \u6709\u5173\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605Hot Reloads vs \u5e94\u7528\u7a0b\u5e8f\u91cd\u65b0\u542f\u52a8\u3002<\/p>\n<p><\/p>\n<h3>\u7b2c3\u6b65: \u5b9e\u73b0\u6309\u94ae\u884c<\/h3>\n<p>\u6309\u94ae\u90e8\u5206\u5305\u542b3\u4e2a\u4f7f\u7528\u76f8\u540c\u5e03\u5c40\u7684\u5217 - \u4e0a\u9762\u4e00\u4e2a\u56fe\u6807\uff0c\u4e0b\u9762\u4e00\u884c\u6587\u672c\u3002\u8be5\u884c\u4e2d\u7684\u5217\u5e73\u5747\u5206\u5e03\u884c\u7a7a\u95f4\uff0c \u6587\u672c\u548c\u56fe\u6807\u989c\u8272\u4e3a\u4e3b\u9898\u4e2d\u7684primary color\uff0c\u5b83\u5728\u5e94\u7528\u7a0b\u5e8f\u7684build()\u65b9\u6cd5\u4e2d\u8bbe\u7f6e\u4e3a\u84dd\u8272\uff1a<\/p>\n<pre><code>class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    \/\/...\n\n    return new MaterialApp(\n      title: 'Flutter Demo',\n      theme: new ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n\n    \/\/...\n}<\/code><\/pre>\n<p>\u7531\u4e8e\u6784\u5efa\u6bcf\u4e2a\u5217\u7684\u4ee3\u7801\u51e0\u4e4e\u662f\u76f8\u540c\u7684\uff0c\u56e0\u6b64\u4f7f\u7528\u4e00\u4e2a\u5d4c\u5957\u51fd\u6570\uff0c\u5982buildButtonColumn\uff0c\u5b83\u4f1a\u521b\u5efa\u4e00\u4e2a\u989c\u8272\u4e3aprimary color\uff0c\u5305\u542b\u4e00\u4e2aIcon\u548cText\u7684 Widget \u5217\u3002<\/p>\n<pre><code>class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    \/\/...\n\n    Column buildButtonColumn(IconData icon, String label) {\n      Color color = Theme.of(context).primaryColor;\n\n      return new Column(\n        mainAxisSize: MainAxisSize.min,\n        mainAxisAlignment: MainAxisAlignment.center,\n        children: [\n          new Icon(icon, color: color),\n          new Container(\n            margin: const EdgeInsets.only(top: 8.0),\n            child: new Text(\n              label,\n              style: new TextStyle(\n                fontSize: 12.0,\n                fontWeight: FontWeight.w400,\n                color: color,\n              ),\n            ),\n          ),\n        ],\n      );\n    }\n  \/\/...\n}<\/code><\/pre>\n<p>\u6784\u5efa\u51fd\u6570\u5c06\u56fe\u6807\u76f4\u63a5\u6dfb\u52a0\u5230\u5217\uff08Column\uff09\u4e2d\u3002\u5c06\u6587\u672c\u653e\u5165\u5bb9\u5668\u4ee5\u5728\u6587\u672c\u4e0a\u65b9\u6dfb\u52a0\u586b\u5145\uff0c\u5c06\u5176\u4e0e\u56fe\u6807\u5206\u5f00\u3002<\/p>\n<p>\u901a\u8fc7\u8c03\u7528\u51fd\u6570\u5e76\u4f20\u9012icon\u548c\u6587\u672c\u6765\u6784\u5efa\u8fd9\u4e9b\u5217\u3002\u7136\u540e\u5728\u884c\u7684\u4e3b\u8f74\u65b9\u5411\u901a\u8fc7&nbsp;MainAxisAlignment.spaceEvenly&nbsp;\u5e73\u5747\u7684\u5206\u914d\u6bcf\u4e2a\u5217\u5360\u636e\u7684\u884c\u7a7a\u95f4\u3002<\/p>\n<pre><code>class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    \/\/...\n\n    Widget buttonSection = new Container(\n      child: new Row(\n        mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n        children: [\n          buildButtonColumn(Icons.call, 'CALL'),\n          buildButtonColumn(Icons.near_me, 'ROUTE'),\n          buildButtonColumn(Icons.share, 'SHARE'),\n        ],\n      ),\n    );\n  \/\/...\n}<\/code><\/pre>\n<h3><\/h3>\n<h3>\u7b2c4\u6b65\uff1a\u5b9e\u73b0\u6587\u672c\u90e8\u5206<\/h3>\n<p>\u5c06\u6587\u672c\u653e\u5165\u5bb9\u5668\u4e2d\uff0c\u4ee5\u4fbf\u6cbf\u6bcf\u6761\u8fb9\u6dfb\u52a032\u50cf\u7d20\u7684\u586b\u5145\u3002softwrap\u5c5e\u6027\u8868\u793a\u6587\u672c\u662f\u5426\u5e94\u5728\u8f6f\u6362\u884c\u7b26\uff08\u4f8b\u5982\u53e5\u70b9\u6216\u9017\u53f7\uff09\u4e4b\u95f4\u65ad\u5f00\u3002<\/p>\n<pre><code>class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    \/\/...\n\n    Widget textSection = new Container(\n      padding: const EdgeInsets.all(32.0),\n      child: new Text(\n        '''\nLake Oeschinen lies at the foot of the Bl\u00fcemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.\n        ''',\n        softWrap: true,\n      ),\n    );\n  \/\/...\n}<\/code><\/pre>\n<h3><\/h3>\n<h3>\u7b2c5\u6b65\uff1a\u5b9e\u73b0\u56fe\u50cf\u90e8\u5206<\/h3>\n<p>\u56db\u5217\u5143\u7d20\u4e2d\u7684\u4e09\u4e2a\u73b0\u5728\u5df2\u7ecf\u5b8c\u6210\uff0c\u53ea\u5269\u4e0b\u56fe\u50cf\u90e8\u5206\u3002\u8be5\u56fe\u7247\u53ef\u4ee5\u5728Creative Commons\u8bb8\u53ef\u4e0b\u5728\u7ebf\u83b7\u5f97\uff0c \u4f46\u662f\u5b83\u975e\u5e38\u5927\uff0c\u4e14\u4e0b\u8f7d\u7f13\u6162\u3002\u5728\u6b65\u9aa40\u4e2d\uff0c\u60a8\u5df2\u7ecf\u5c06\u8be5\u56fe\u50cf\u5305\u542b\u5728\u9879\u76ee\u4e2d\u5e76\u66f4\u65b0\u4e86pubspec\u6587\u4ef6\uff0c\u6240\u4ee5\u73b0\u5728\u53ef\u4ee5\u4ece\u4ee3\u7801\u4e2d\u76f4\u63a5\u5f15\u7528\u5b83\uff1a<\/p>\n<pre><code>body: new ListView(\n  children: [\n    new Image.asset(\n      'images\/lake.jpg',\n      height: 240.0,\n      fit: BoxFit.cover,\n    ),\n    \/\/ ...\n  ],\n)<\/code><\/pre>\n<p>BoxFit.cover&nbsp;\u544a\u8bc9\u6846\u67b6\uff0c\u56fe\u50cf\u5e94\u8be5\u5c3d\u53ef\u80fd\u5c0f\uff0c\u4f46\u8986\u76d6\u6574\u4e2a\u6e32\u67d3\u6846<\/p>\n<p><\/p>\n<h3>Step 6: \u6574\u5408<\/h3>\n<p>\u5728\u6700\u540e\u4e00\u6b65\uff0c\u4f60\u5c06\u4e0a\u9762\u8fd9\u4e9b\u7ec4\u88c5\u5728\u4e00\u8d77\u3002\u8fd9\u4e9bwidget\u653e\u7f6e\u5230ListView\u4e2d\uff0c\u800c\u4e0d\u662f\u5217\u4e2d\uff0c\u56e0\u4e3a\u5728\u5c0f\u8bbe\u5907\u4e0a\u8fd0\u884c\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0cListView\u4f1a\u81ea\u52a8\u6eda\u52a8\u3002<\/p>\n<pre><code>\/\/...\nbody: new ListView(\n  children: [\n    new Image.asset(\n      'images\/lake.jpg',\n      width: 600.0,\n      height: 240.0,\n      fit: BoxFit.cover,\n    ),\n    titleSection,\n    buttonSection,\n    textSection,\n  ],\n),\n\/\/...<\/code><\/pre>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7b2c0\u6b65: \u8bbe\u7f6e \u9996\u5148, \u83b7\u53d6\u4ee3\u7801: \u786e\u4fdd\u60a8\u5df2\u7ecf\u5b89\u88c5\u597d\u4e86&nbsp;set up&nbsp;\u60a8\u7684Flutter\u73af [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":191147,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[182398],"tags":[],"class_list":["post-191146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mini-program"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/191146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=191146"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/191146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media\/191147"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=191146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=191146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=191146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}