{"id":60341,"date":"2026-01-15T13:05:30","date_gmt":"2026-01-15T05:05:30","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/60341.html"},"modified":"2026-01-15T13:05:30","modified_gmt":"2026-01-15T05:05:30","slug":"flutter-listview-%e5%88%97%e8%a1%a8%e7%bb%84%e4%bb%b6%e5%ae%8c%e5%85%a8%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/60341.html","title":{"rendered":"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357"},"content":{"rendered":"<h3>\u4ec0\u4e48\u662f ListView&#xff1f;<\/h3>\n<p>ListView \u662f Flutter \u4e2d\u7528\u4e8e\u663e\u793a\u53ef\u6eda\u52a8\u5217\u8868\u7684\u7ec4\u4ef6&#xff0c;\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684\u6eda\u52a8\u5bb9\u5668\u3002<\/p>\n<p>\u7528\u9014&#xff1a;<\/p>\n<ul>\n<li>\u663e\u793a\u957f\u5217\u8868<\/li>\n<li>\u804a\u5929\u6d88\u606f\u5217\u8868<\/li>\n<li>\u5546\u54c1\u5217\u8868<\/li>\n<li>\u65b0\u95fb\u5217\u8868<\/li>\n<li>\u4efb\u4f55\u9700\u8981\u6eda\u52a8\u7684\u5185\u5bb9<\/li>\n<\/ul>\n<h3>ListView \u7684\u7c7b\u578b<\/h3>\n<h4>1. ListView &#8211; \u57fa\u7840\u5217\u8868<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span>title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee 1&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span>title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee 2&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span>title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee 3&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>2. ListView.builder &#8211; \u52a8\u6001\u5217\u8868&#xff08;\u63a8\u8350&#xff09;<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>3. ListView.separated &#8211; \u5e26\u5206\u9694\u7b26\u7684\u5217\u8868<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">separated<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  separatorBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Divider<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ \u5206\u9694\u7ebf<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>4. ListView.custom &#8211; \u81ea\u5b9a\u4e49\u5217\u8868<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">custom<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  childrenDelegate<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SliverChildBuilderDelegate<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span>title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    childCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h3>\u5e38\u7528\u5c5e\u6027<\/h3>\n<h4>1. \u6eda\u52a8\u65b9\u5411 scrollDirection<\/h4>\n<p><span class=\"token comment\">\/\/ \u5782\u76f4\u6eda\u52a8&#xff08;\u9ed8\u8ba4&#xff09;<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  scrollDirection<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Axis<\/span><span class=\"token punctuation\">.<\/span>vertical<span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6c34\u5e73\u6eda\u52a8<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  scrollDirection<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Axis<\/span><span class=\"token punctuation\">.<\/span>horizontal<span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>2. \u53cd\u5411\u6eda\u52a8 reverse<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  reverse<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ \u4ece\u5e95\u90e8\u5f00\u59cb<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>3. \u5185\u8fb9\u8ddd padding<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>4. \u7269\u7406\u6548\u679c physics<\/h4>\n<p><span class=\"token comment\">\/\/ \u603b\u662f\u53ef\u6eda\u52a8<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  physics<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">AlwaysScrollableScrollPhysics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6c38\u4e0d\u6eda\u52a8<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  physics<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">NeverScrollableScrollPhysics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5f39\u6027\u6eda\u52a8&#xff08;iOS \u98ce\u683c&#xff09;<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  physics<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BouncingScrollPhysics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5939\u7d27\u6eda\u52a8&#xff08;Android \u98ce\u683c&#xff09;<\/span><br \/>\n<span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  physics<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ClampingScrollPhysics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h3>ListTile \u5217\u8868\u9879<\/h3>\n<h4>\u57fa\u7840\u7528\u6cd5<\/h4>\n<p><span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>person<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>      <span class=\"token comment\">\/\/ \u5de6\u4fa7\u56fe\u6807<\/span><br \/>\n  title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u6807\u9898&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>               <span class=\"token comment\">\/\/ \u6807\u9898<\/span><br \/>\n  subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u526f\u6807\u9898&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>          <span class=\"token comment\">\/\/ \u526f\u6807\u9898<\/span><br \/>\n  trailing<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>chevron_right<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ \u53f3\u4fa7\u56fe\u6807<\/span><br \/>\n  onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u70b9\u51fb\u4e86\u5217\u8868\u9879&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>\u5b8c\u6574\u5c5e\u6027<\/h4>\n<p><span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircleAvatar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>person<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u5f20\u4e09&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;Flutter \u5f00\u53d1\u5de5\u7a0b\u5e08&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  trailing<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>chevron_right<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  isThreeLine<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ \u662f\u5426\u4e09\u884c<\/span><br \/>\n  dense<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span>        <span class=\"token comment\">\/\/ \u662f\u5426\u7d27\u51d1<\/span><br \/>\n  enabled<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>       <span class=\"token comment\">\/\/ \u662f\u5426\u542f\u7528<\/span><br \/>\n  selected<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span>     <span class=\"token comment\">\/\/ \u662f\u5426\u9009\u4e2d<\/span><br \/>\n  onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  onLongPress<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h3>\u5b9e\u6218\u6848\u4f8b<\/h3>\n<h4>\u6848\u4f8b1&#xff1a;\u7b80\u5355\u5217\u8868<\/h4>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircleAvatar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;<\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u5217\u8868\u9879 <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u8fd9\u662f\u526f\u6807\u9898&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      trailing<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>chevron_right<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u70b9\u51fb\u4e86\u7b2c <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\"> \u9879&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>\u6848\u4f8b2&#xff1a;\u8054\u7cfb\u4eba\u5217\u8868<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Contact<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> name<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> phone<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> avatar<span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token class-name\">Contact<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>phone<span class=\"token punctuation\">,<\/span> required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>avatar<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ContactList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Contact<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> contacts <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">Contact<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u5f20\u4e09&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> phone<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;138****0001&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;https:\/\/example.com\/1.jpg&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">Contact<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u674e\u56db&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> phone<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;138****0002&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;https:\/\/example.com\/2.jpg&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">Contact<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u738b\u4e94&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> phone<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;138****0003&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;https:\/\/example.com\/3.jpg&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> contacts<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">final<\/span> contact <span class=\"token operator\">&#061;<\/span> contacts<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircleAvatar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            backgroundImage<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">NetworkImage<\/span><span class=\"token punctuation\">(<\/span>contact<span class=\"token punctuation\">.<\/span>avatar<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>contact<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>contact<span class=\"token punctuation\">.<\/span>phone<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          trailing<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">IconButton<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            icon<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>phone<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            onPressed<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u62e8\u6253 <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">contact<span class=\"token punctuation\">.<\/span>phone<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u67e5\u770b <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">contact<span class=\"token punctuation\">.<\/span>name<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\"> \u7684\u8be6\u60c5&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b3&#xff1a;\u804a\u5929\u5217\u8868<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ChatItem<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> name<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> message<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> time<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> int unread<span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token class-name\">ChatItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">,<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>time<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>unread <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ChatList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">ChatItem<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> chats <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">ChatItem<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u5f20\u4e09&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u4f60\u597d\u554a&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> time<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;10:30&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> unread<span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">ChatItem<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u674e\u56db&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u5728\u5417&#xff1f;&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> time<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;09:15&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> unread<span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token class-name\">ChatItem<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u738b\u4e94&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u665a\u4e0a\u4e00\u8d77\u5403\u996d&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> time<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u6628\u5929&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> unread<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> chats<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">final<\/span> chat <span class=\"token operator\">&#061;<\/span> chats<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircleAvatar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>chat<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Row<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n              <span class=\"token class-name\">Expanded<\/span><span class=\"token punctuation\">(<\/span>child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>chat<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                chat<span class=\"token punctuation\">.<\/span>time<span class=\"token punctuation\">,<\/span><br \/>\n                style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span>fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span> color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>grey<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Row<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n              <span class=\"token class-name\">Expanded<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                  chat<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">,<\/span><br \/>\n                  maxLines<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  overflow<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextOverflow<\/span><span class=\"token punctuation\">.<\/span>ellipsis<span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>chat<span class=\"token punctuation\">.<\/span>unread <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                <span class=\"token class-name\">Container<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                  padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  decoration<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxDecoration<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>red<span class=\"token punctuation\">,<\/span><br \/>\n                    shape<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxShape<\/span><span class=\"token punctuation\">.<\/span>circle<span class=\"token punctuation\">,<\/span><br \/>\n                  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  constraints<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxConstraints<\/span><span class=\"token punctuation\">(<\/span>minWidth<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> minHeight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Center<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                      <span class=\"token string-literal\"><span class=\"token string\">&#039;<\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">chat<span class=\"token punctuation\">.<\/span>unread<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span>color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>white<span class=\"token punctuation\">,<\/span> fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u6253\u5f00\u4e0e <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">chat<span class=\"token punctuation\">.<\/span>name<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\"> \u7684\u804a\u5929&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b4&#xff1a;\u5546\u54c1\u5217\u8868<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Product<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> name<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> image<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> double price<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">String<\/span> description<span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token class-name\">Product<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>image<span class=\"token punctuation\">,<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price<span class=\"token punctuation\">,<\/span><br \/>\n    required <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ProductList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Product<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> products <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">Product<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;iPhone 15 Pro&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n      image<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;https:\/\/example.com\/iphone.jpg&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n      price<span class=\"token punctuation\">:<\/span> <span class=\"token number\">7999<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      description<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u6700\u65b0\u6b3e iPhone&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u66f4\u591a\u5546\u54c1&#8230;<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> products<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">final<\/span> product <span class=\"token operator\">&#061;<\/span> products<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Card<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          margin<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Padding<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Row<\/span><span class=\"token punctuation\">(<\/span><br \/>\n              crossAxisAlignment<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CrossAxisAlignment<\/span><span class=\"token punctuation\">.<\/span>start<span class=\"token punctuation\">,<\/span><br \/>\n              children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n                <span class=\"token class-name\">ClipRRect<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                  borderRadius<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BorderRadius<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">circular<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">8<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Image<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">network<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    product<span class=\"token punctuation\">.<\/span>image<span class=\"token punctuation\">,<\/span><br \/>\n                    width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    fit<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxFit<\/span><span class=\"token punctuation\">.<\/span>cover<span class=\"token punctuation\">,<\/span><br \/>\n                  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token class-name\">SizedBox<\/span><span class=\"token punctuation\">(<\/span>width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token class-name\">Expanded<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                  child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Column<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    crossAxisAlignment<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CrossAxisAlignment<\/span><span class=\"token punctuation\">.<\/span>start<span class=\"token punctuation\">,<\/span><br \/>\n                    children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n                      <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                        product<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span><br \/>\n                        style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                          fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                          fontWeight<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">FontWeight<\/span><span class=\"token punctuation\">.<\/span>bold<span class=\"token punctuation\">,<\/span><br \/>\n                        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token class-name\">SizedBox<\/span><span class=\"token punctuation\">(<\/span>height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                        product<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">,<\/span><br \/>\n                        style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span>color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>grey<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                        maxLines<span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                        overflow<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextOverflow<\/span><span class=\"token punctuation\">.<\/span>ellipsis<span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token class-name\">SizedBox<\/span><span class=\"token punctuation\">(<\/span>height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token class-name\">Row<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                        children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n                          <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                            <span class=\"token string-literal\"><span class=\"token string\">&#039;\u00a5<\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">product<span class=\"token punctuation\">.<\/span>price<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n                            style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                              fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                              fontWeight<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">FontWeight<\/span><span class=\"token punctuation\">.<\/span>bold<span class=\"token punctuation\">,<\/span><br \/>\n                              color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>red<span class=\"token punctuation\">,<\/span><br \/>\n                            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                          <span class=\"token class-name\">Spacer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                          <span class=\"token class-name\">ElevatedButton<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                            onPressed<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                            child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u8d2d\u4e70&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b5&#xff1a;\u6c34\u5e73\u6eda\u52a8\u5217\u8868<\/h4>\n<p><span class=\"token class-name\">Container<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    scrollDirection<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Axis<\/span><span class=\"token punctuation\">.<\/span>horizontal<span class=\"token punctuation\">,<\/span><br \/>\n    itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Container<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">150<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        margin<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        decoration<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxDecoration<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>blue<span class=\"token punctuation\">,<\/span><br \/>\n          borderRadius<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BorderRadius<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">circular<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Center<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token string-literal\"><span class=\"token string\">&#039;\u5361\u7247 <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n            style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span>color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>white<span class=\"token punctuation\">,<\/span> fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">18<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>\u6848\u4f8b6&#xff1a;\u5206\u7ec4\u5217\u8868<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GroupedList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">final<\/span> <span class=\"token class-name\">Map<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> groups <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token string-literal\"><span class=\"token string\">&#039;A&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;Alice&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;Amy&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;Andrew&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token string-literal\"><span class=\"token string\">&#039;B&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;Bob&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;Betty&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;Brian&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token string-literal\"><span class=\"token string\">&#039;C&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;Charlie&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;Cathy&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token function\">_getTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">final<\/span> item <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">_getItem<\/span><span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;type&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;header&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Container<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>grey<span class=\"token punctuation\">[<\/span><span class=\"token number\">300<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n              item<span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;data&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              style<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextStyle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                fontWeight<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">FontWeight<\/span><span class=\"token punctuation\">.<\/span>bold<span class=\"token punctuation\">,<\/span><br \/>\n                fontSize<span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">[<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;data&#039;<\/span><\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  int <span class=\"token function\">_getTotalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    int count <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    groups<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">,<\/span> value<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      count <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token number\">1<\/span> <span class=\"token operator\">&#043;<\/span> value<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ 1 \u4e2a\u6807\u9898 &#043; n \u4e2a\u9879\u76ee<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> count<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token class-name\">Map<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">dynamic<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token function\">_getItem<\/span><span class=\"token punctuation\">(<\/span>int index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    int currentIndex <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> entry <span class=\"token keyword\">in<\/span> groups<span class=\"token punctuation\">.<\/span>entries<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentIndex <span class=\"token operator\">&#061;&#061;<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;type&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;header&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;data&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> entry<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      currentIndex<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>      <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> entry<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentIndex <span class=\"token operator\">&#061;&#061;<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;type&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;item&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;data&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> item<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        currentIndex<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;type&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;item&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;data&#039;<\/span><\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;&#039;<\/span><\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b7&#xff1a;\u4e0b\u62c9\u5237\u65b0<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">RefreshableList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatefulWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  _RefreshableListState <span class=\"token function\">createState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">_RefreshableListState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> _RefreshableListState <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">State<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">RefreshableList<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> items <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token class-name\">Future<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token keyword\">void<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token function\">_onRefresh<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">await<\/span> <span class=\"token class-name\">Future<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">delayed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Duration<\/span><span class=\"token punctuation\">(<\/span>seconds<span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      items <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u65b0\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">RefreshIndicator<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      onRefresh<span class=\"token punctuation\">:<\/span> _onRefresh<span class=\"token punctuation\">,<\/span><br \/>\n      child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        itemCount<span class=\"token punctuation\">:<\/span> items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n        itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>items<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b8&#xff1a;\u6ed1\u52a8\u5220\u9664<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">DismissibleList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatefulWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  _DismissibleListState <span class=\"token function\">createState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">_DismissibleListState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> _DismissibleListState <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">State<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">DismissibleList<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> items <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">final<\/span> item <span class=\"token operator\">&#061;<\/span> items<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Dismissible<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          key<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Key<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          background<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Container<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>red<span class=\"token punctuation\">,<\/span><br \/>\n            alignment<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Alignment<\/span><span class=\"token punctuation\">.<\/span>centerRight<span class=\"token punctuation\">,<\/span><br \/>\n            padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">only<\/span><span class=\"token punctuation\">(<\/span>right<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>delete<span class=\"token punctuation\">,<\/span> color<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Colors<\/span><span class=\"token punctuation\">.<\/span>white<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          direction<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">DismissDirection<\/span><span class=\"token punctuation\">.<\/span>endToStart<span class=\"token punctuation\">,<\/span><br \/>\n          onDismissed<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>direction<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              items<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeAt<\/span><span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token class-name\">ScaffoldMessenger<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">of<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">showSnackBar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n              <span class=\"token class-name\">SnackBar<\/span><span class=\"token punctuation\">(<\/span>content<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;<\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">item<\/span><\/span><span class=\"token string\"> \u5df2\u5220\u9664&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b9&#xff1a;\u52a0\u8f7d\u66f4\u591a<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">LoadMoreList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatefulWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  _LoadMoreListState <span class=\"token function\">createState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">_LoadMoreListState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> _LoadMoreListState <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">State<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">LoadMoreList<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> items <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  bool isLoading <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token class-name\">ScrollController<\/span> _scrollController <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">ScrollController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token keyword\">void<\/span> <span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    _scrollController<span class=\"token punctuation\">.<\/span><span class=\"token function\">addListener<\/span><span class=\"token punctuation\">(<\/span>_onScroll<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">void<\/span> <span class=\"token function\">_onScroll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>_scrollController<span class=\"token punctuation\">.<\/span>position<span class=\"token punctuation\">.<\/span>pixels <span class=\"token operator\">&#061;&#061;<\/span><br \/>\n        _scrollController<span class=\"token punctuation\">.<\/span>position<span class=\"token punctuation\">.<\/span>maxScrollExtent<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token function\">_loadMore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token class-name\">Future<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token keyword\">void<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token function\">_loadMore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>isLoading<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      isLoading <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">await<\/span> <span class=\"token class-name\">Future<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">delayed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Duration<\/span><span class=\"token punctuation\">(<\/span>seconds<span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      int currentLength <span class=\"token operator\">&#061;<\/span> items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span><br \/>\n      items<span class=\"token punctuation\">.<\/span><span class=\"token function\">addAll<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">currentLength <span class=\"token operator\">&#043;<\/span> index<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      isLoading <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      controller<span class=\"token punctuation\">:<\/span> _scrollController<span class=\"token punctuation\">,<\/span><br \/>\n      itemCount<span class=\"token punctuation\">:<\/span> items<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>index <span class=\"token operator\">&#061;&#061;<\/span> items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> isLoading<br \/>\n              <span class=\"token operator\">?<\/span> <span class=\"token class-name\">Center<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                  child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Padding<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircularProgressIndicator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">)<\/span><br \/>\n              <span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SizedBox<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">shrink<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>items<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token keyword\">void<\/span> <span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    _scrollController<span class=\"token punctuation\">.<\/span><span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>\u6848\u4f8b10&#xff1a;\u641c\u7d22\u5217\u8868<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">SearchableList<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatefulWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  _SearchableListState <span class=\"token function\">createState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">_SearchableListState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> _SearchableListState <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">State<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">SearchableList<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> allItems <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">List<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u9879\u76ee <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">$<\/span><span class=\"token expression\">index<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token class-name\">List<\/span><span class=\"token generics\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">String<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> filteredItems <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token class-name\">TextEditingController<\/span> _searchController <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">TextEditingController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token keyword\">void<\/span> <span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    filteredItems <span class=\"token operator\">&#061;<\/span> allItems<span class=\"token punctuation\">;<\/span><br \/>\n    _searchController<span class=\"token punctuation\">.<\/span><span class=\"token function\">addListener<\/span><span class=\"token punctuation\">(<\/span>_onSearchChanged<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">void<\/span> <span class=\"token function\">_onSearchChanged<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      filteredItems <span class=\"token operator\">&#061;<\/span> allItems<br \/>\n          <span class=\"token punctuation\">.<\/span><span class=\"token function\">where<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n              item<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLowerCase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">contains<\/span><span class=\"token punctuation\">(<\/span>_searchController<span class=\"token punctuation\">.<\/span>text<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLowerCase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n          <span class=\"token punctuation\">.<\/span><span class=\"token function\">toList<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Column<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token class-name\">Padding<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          padding<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EdgeInsets<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">TextField<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            controller<span class=\"token punctuation\">:<\/span> _searchController<span class=\"token punctuation\">,<\/span><br \/>\n            decoration<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">InputDecoration<\/span><span class=\"token punctuation\">(<\/span><br \/>\n              hintText<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;\u641c\u7d22&#8230;&#039;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n              prefixIcon<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>search<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              border<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">OutlineInputBorder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                borderRadius<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BorderRadius<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">circular<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token class-name\">Expanded<\/span><span class=\"token punctuation\">(<\/span><br \/>\n          child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">builder<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            itemCount<span class=\"token punctuation\">:<\/span> filteredItems<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span><br \/>\n            itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span>filteredItems<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token keyword\">void<\/span> <span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    _searchController<span class=\"token punctuation\">.<\/span><span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">dispose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>\u5b8c\u6574\u793a\u4f8b<\/h3>\n<p><span class=\"token keyword\">import<\/span> <span class=\"token string-literal\"><span class=\"token string\">&#039;package:flutter\/material.dart&#039;<\/span><\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">void<\/span> <span class=\"token function\">main<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">runApp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">MyApp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">MyApp<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">MaterialApp<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      home<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListViewDemo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ListViewDemo<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">StatelessWidget<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token metadata function\">&#064;override<\/span><br \/>\n  <span class=\"token class-name\">Widget<\/span> <span class=\"token function\">build<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">BuildContext<\/span> context<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Scaffold<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      appBar<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">AppBar<\/span><span class=\"token punctuation\">(<\/span>title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;ListView \u793a\u4f8b&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      body<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">separated<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        itemCount<span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        itemBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">ListTile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            leading<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">CircleAvatar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n              child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;<\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            title<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u5217\u8868\u9879 <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            subtitle<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u8fd9\u662f\u526f\u6807\u9898&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            trailing<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Icon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Icons<\/span><span class=\"token punctuation\">.<\/span>chevron_right<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            onTap<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              <span class=\"token class-name\">ScaffoldMessenger<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">of<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">showSnackBar<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token class-name\">SnackBar<\/span><span class=\"token punctuation\">(<\/span>content<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u70b9\u51fb\u4e86\u7b2c <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\"> \u9879&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n              <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        separatorBuilder<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          <span class=\"token keyword\">return<\/span> <span class=\"token class-name\">Divider<\/span><span class=\"token punctuation\">(<\/span>height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>\u5e38\u89c1\u95ee\u9898<\/h3>\n<h4>1. ListView \u5728 Column \u4e2d\u4e0d\u663e\u793a&#xff1f;<\/h4>\n<p><span class=\"token comment\">\/\/ \u274c \u9519\u8bef<\/span><br \/>\n<span class=\"token class-name\">Column<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ \u4f1a\u62a5\u9519<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u89e3\u51b31&#xff1a;\u4f7f\u7528 Expanded<\/span><br \/>\n<span class=\"token class-name\">Column<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">Expanded<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      child<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u89e3\u51b32&#xff1a;\u4f7f\u7528 shrinkWrap<\/span><br \/>\n<span class=\"token class-name\">Column<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n      shrinkWrap<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      physics<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">NeverScrollableScrollPhysics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>2. \u5982\u4f55\u76d1\u542c\u6eda\u52a8&#xff1f;<\/h4>\n<p><span class=\"token class-name\">ScrollController<\/span> _controller <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">ScrollController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token metadata function\">&#064;override<\/span><br \/>\n<span class=\"token keyword\">void<\/span> <span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">initState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  _controller<span class=\"token punctuation\">.<\/span><span class=\"token function\">addListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">print<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">&#039;\u6eda\u52a8\u4f4d\u7f6e: <\/span><span class=\"token interpolation\"><span class=\"token punctuation\">${<\/span><span class=\"token expression\">_controller<span class=\"token punctuation\">.<\/span>position<span class=\"token punctuation\">.<\/span>pixels<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token string\">&#039;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token class-name\">ListView<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  controller<span class=\"token punctuation\">:<\/span> _controller<span class=\"token punctuation\">,<\/span><br \/>\n  children<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">.<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<h4>3. \u5982\u4f55\u6eda\u52a8\u5230\u6307\u5b9a\u4f4d\u7f6e&#xff1f;<\/h4>\n<p>_controller<span class=\"token punctuation\">.<\/span><span class=\"token function\">animateTo<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  <span class=\"token number\">100.0<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  duration<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Duration<\/span><span class=\"token punctuation\">(<\/span>milliseconds<span class=\"token punctuation\">:<\/span> <span class=\"token number\">500<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  curve<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Curves<\/span><span class=\"token punctuation\">.<\/span>easeInOut<span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>\u5c5e\u6027\u901f\u67e5\u8868<\/h3>\n<table>\n<tr>\u5c5e\u6027\u8bf4\u660e<\/tr>\n<tbody>\n<tr>\n<td>children<\/td>\n<td>\u5b50\u7ec4\u4ef6\u5217\u8868<\/td>\n<\/tr>\n<tr>\n<td>scrollDirection<\/td>\n<td>\u6eda\u52a8\u65b9\u5411<\/td>\n<\/tr>\n<tr>\n<td>reverse<\/td>\n<td>\u662f\u5426\u53cd\u5411<\/td>\n<\/tr>\n<tr>\n<td>controller<\/td>\n<td>\u6eda\u52a8\u63a7\u5236\u5668<\/td>\n<\/tr>\n<tr>\n<td>physics<\/td>\n<td>\u6eda\u52a8\u7269\u7406\u6548\u679c<\/td>\n<\/tr>\n<tr>\n<td>padding<\/td>\n<td>\u5185\u8fb9\u8ddd<\/td>\n<\/tr>\n<tr>\n<td>shrinkWrap<\/td>\n<td>\u662f\u5426\u6839\u636e\u5b50\u7ec4\u4ef6\u8c03\u6574\u5927\u5c0f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>ListView.builder \u53c2\u6570<\/h4>\n<table>\n<tr>\u53c2\u6570\u8bf4\u660e<\/tr>\n<tbody>\n<tr>\n<td>itemCount<\/td>\n<td>\u9879\u76ee\u6570\u91cf<\/td>\n<\/tr>\n<tr>\n<td>itemBuilder<\/td>\n<td>\u9879\u76ee\u6784\u5efa\u5668<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>ListTile \u5c5e\u6027<\/h4>\n<table>\n<tr>\u5c5e\u6027\u8bf4\u660e<\/tr>\n<tbody>\n<tr>\n<td>leading<\/td>\n<td>\u5de6\u4fa7\u7ec4\u4ef6<\/td>\n<\/tr>\n<tr>\n<td>title<\/td>\n<td>\u6807\u9898<\/td>\n<\/tr>\n<tr>\n<td>subtitle<\/td>\n<td>\u526f\u6807\u9898<\/td>\n<\/tr>\n<tr>\n<td>trailing<\/td>\n<td>\u53f3\u4fa7\u7ec4\u4ef6<\/td>\n<\/tr>\n<tr>\n<td>onTap<\/td>\n<td>\u70b9\u51fb\u56de\u8c03<\/td>\n<\/tr>\n<tr>\n<td>onLongPress<\/td>\n<td>\u957f\u6309\u56de\u8c03<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\u603b\u7ed3<\/h3>\n<p>ListView \u7684\u6838\u5fc3\u8981\u70b9&#xff1a;<\/p>\n<li>ListView.builder \u9002\u5408\u5927\u91cf\u6570\u636e<\/li>\n<li>ListView.separated \u81ea\u52a8\u6dfb\u52a0\u5206\u9694\u7b26<\/li>\n<li>\u4f7f\u7528 ScrollController \u63a7\u5236\u6eda\u52a8<\/li>\n<li>RefreshIndicator \u5b9e\u73b0\u4e0b\u62c9\u5237\u65b0<\/li>\n<li>Dismissible \u5b9e\u73b0\u6ed1\u52a8\u5220\u9664<\/li>\n<p>\u8bb0\u4f4f&#xff1a;<\/p>\n<ul>\n<li>\u5927\u91cf\u6570\u636e\u7528 ListView.builder<\/li>\n<li>\u5728 Column \u4e2d\u4f7f\u7528\u9700\u8981 Expanded \u6216 shrinkWrap<\/li>\n<li>\u4f7f\u7528 ListTile \u5feb\u901f\u6784\u5efa\u5217\u8868\u9879<\/li>\n<li>\u5584\u7528 ScrollController \u76d1\u542c\u548c\u63a7\u5236\u6eda\u52a8<\/li>\n<\/ul>\n<p>ListView \u662f\u6700\u5e38\u7528\u7684\u6eda\u52a8\u7ec4\u4ef6&#xff0c;\u638c\u63e1\u5b83\u80fd\u6784\u5efa\u5404\u79cd\u5217\u8868\u754c\u9762&#xff01;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4ec0\u4e48\u662f ListView&#xff1f;<br \/>\nListView \u662f Flutter \u4e2d\u7528\u4e8e\u663e\u793a\u53ef\u6eda\u52a8\u5217\u8868\u7684\u7ec4\u4ef6&#xff0c;\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684\u6eda\u52a8\u5bb9\u5668\u3002<br \/>\n\u7528\u9014&#xff1a;<br \/>\n\u663e\u793a\u957f\u5217\u8868\u804a\u5929\u6d88\u606f\u5217\u8868\u5546\u54c1\u5217\u8868\u65b0\u95fb\u5217\u8868\u4efb\u4f55\u9700\u8981\u6eda\u52a8\u7684\u5185\u5bb9<br \/>\nListView \u7684\u7c7b\u578b<br \/>\n1. ListView &#8211; \u57fa\u7840\u5217\u8868<br \/>\nListView(children: [ListTile(title: Text(\u9879\u76ee 1)),ListTile(title: Text(\u9879\u76ee 2)),ListTile(title<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[84,2878,1680],"topic":[],"class_list":["post-60341","post","type-post","status-publish","format-standard","hentry","category-server","tag-android","tag-flutter","tag-ios"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/60341.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u4ec0\u4e48\u662f ListView&#xff1f; ListView \u662f Flutter \u4e2d\u7528\u4e8e\u663e\u793a\u53ef\u6eda\u52a8\u5217\u8868\u7684\u7ec4\u4ef6&#xff0c;\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684\u6eda\u52a8\u5bb9\u5668\u3002 \u7528\u9014&#xff1a; \u663e\u793a\u957f\u5217\u8868\u804a\u5929\u6d88\u606f\u5217\u8868\u5546\u54c1\u5217\u8868\u65b0\u95fb\u5217\u8868\u4efb\u4f55\u9700\u8981\u6eda\u52a8\u7684\u5185\u5bb9 ListView \u7684\u7c7b\u578b 1. ListView - \u57fa\u7840\u5217\u8868 ListView(children: [ListTile(title: Text(\u9879\u76ee 1)),ListTile(title: Text(\u9879\u76ee 2)),ListTile(title\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/60341.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-15T05:05:30+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/60341.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/60341.html\",\"name\":\"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-15T05:05:30+00:00\",\"dateModified\":\"2026-01-15T05:05:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/60341.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/60341.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/60341.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/60341.html","og_locale":"zh_CN","og_type":"article","og_title":"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u4ec0\u4e48\u662f ListView&#xff1f; ListView \u662f Flutter \u4e2d\u7528\u4e8e\u663e\u793a\u53ef\u6eda\u52a8\u5217\u8868\u7684\u7ec4\u4ef6&#xff0c;\u7c7b\u4f3c\u4e8e HTML \u4e2d\u7684\u6eda\u52a8\u5bb9\u5668\u3002 \u7528\u9014&#xff1a; \u663e\u793a\u957f\u5217\u8868\u804a\u5929\u6d88\u606f\u5217\u8868\u5546\u54c1\u5217\u8868\u65b0\u95fb\u5217\u8868\u4efb\u4f55\u9700\u8981\u6eda\u52a8\u7684\u5185\u5bb9 ListView \u7684\u7c7b\u578b 1. ListView - \u57fa\u7840\u5217\u8868 ListView(children: [ListTile(title: Text(\u9879\u76ee 1)),ListTile(title: Text(\u9879\u76ee 2)),ListTile(title","og_url":"https:\/\/www.wsisp.com\/helps\/60341.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-15T05:05:30+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/60341.html","url":"https:\/\/www.wsisp.com\/helps\/60341.html","name":"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-15T05:05:30+00:00","dateModified":"2026-01-15T05:05:30+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/60341.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/60341.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/60341.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Flutter ListView \u5217\u8868\u7ec4\u4ef6\u5b8c\u5168\u6307\u5357"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/60341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=60341"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/60341\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=60341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=60341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=60341"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=60341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}