{"id":62359,"date":"2026-01-19T22:17:59","date_gmt":"2026-01-19T14:17:59","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/62359.html"},"modified":"2026-01-19T22:17:59","modified_gmt":"2026-01-19T14:17:59","slug":"flutter-%e6%a1%86%e6%9e%b6%e8%b7%a8%e5%b9%b3%e5%8f%b0%e9%b8%bf%e8%92%99%e5%bc%80%e5%8f%91-container-%e5%b8%83%e5%b1%80%ef%bc%9apadding%e3%80%81margin%e3%80%81%e5%af%b9%e9%bd%90","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/62359.html","title":{"rendered":"Flutter \u6846\u67b6\u8de8\u5e73\u53f0\u9e3f\u8499\u5f00\u53d1 \u2014\u2014 Container \u5e03\u5c40\uff1apadding\u3001margin\u3001\u5bf9\u9f50"},"content":{"rendered":"

\u793a\u4f8b\u4ee3\u7801<\/h3>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

import<\/span> 'package:flutter\/material.dart'<\/span><\/span>;<\/span><\/p>\n

void<\/span> main<\/span>(<\/span>)<\/span> =<\/span>><\/span> runApp<\/span>(<\/span>const<\/span> ContainerLayoutApp<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

class<\/span> ContainerLayoutApp<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>
\n const<\/span> ContainerLayoutApp<\/span>(<\/span>{<\/span>Key<\/span>?<\/span> key}<\/span>)<\/span> :<\/span> super<\/span>(<\/span>key:<\/span> key)<\/span>;<\/span><\/p>\n

@override<\/span>
\n Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>
\n return<\/span> MaterialApp<\/span>(<\/span>
\n debugShowCheckedModeBanner:<\/span> false<\/span>,<\/span>
\n home:<\/span> Scaffold<\/span>(<\/span>
\n appBar:<\/span> AppBar<\/span>(<\/span>title:<\/span> const<\/span> Text<\/span>(<\/span>'Container \u5e03\u5c40'<\/span><\/span>)<\/span>)<\/span>,<\/span>
\n body:<\/span> const<\/span> SingleChildScrollView<\/span>(<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n PaddingExample<\/span>(<\/span>)<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 20<\/span>)<\/span>,<\/span>
\n MarginExample<\/span>(<\/span>)<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 20<\/span>)<\/span>,<\/span>
\n AlignmentExample<\/span>(<\/span>)<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 20<\/span>)<\/span>,<\/span>
\n CombinedLayoutExample<\/span>(<\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

class<\/span> PaddingExample<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>
\n const<\/span> PaddingExample<\/span>(<\/span>{<\/span>Key<\/span>?<\/span> key}<\/span>)<\/span> :<\/span> super<\/span>(<\/span>key:<\/span> key)<\/span>;<\/span><\/p>\n

@override<\/span>
\n Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>
\n return<\/span> Card<\/span>(<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n Padding<\/span>(<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>12<\/span>)<\/span>,<\/span>
\n child:<\/span> Text<\/span>(<\/span>
\n '\u793a\u4f8b1：\u5185\u8fb9\u8ddd（Padding）'<\/span><\/span>,<\/span>
\n style:<\/span> TextStyle<\/span>(<\/span>fontWeight:<\/span> FontWeight<\/span>.<\/span>bold,<\/span> fontSize:<\/span> 16<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> Padding<\/span>(<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n children:<\/span> [<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>blue.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u56db\u5468\u5185\u8fb9\u8ddd 16'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>symmetric<\/span>(<\/span>horizontal:<\/span> 24<\/span>,<\/span> vertical:<\/span> 12<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>green.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u6c34\u5e7324，\u5782\u76f412'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>only<\/span>(<\/span>left:<\/span> 32<\/span>,<\/span> right:<\/span> 16<\/span>,<\/span> top:<\/span> 12<\/span>,<\/span> bottom:<\/span> 12<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>orange.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u5de632，\u5176\u4ed616\/12'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

class<\/span> MarginExample<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>
\n const<\/span> MarginExample<\/span>(<\/span>{<\/span>Key<\/span>?<\/span> key}<\/span>)<\/span> :<\/span> super<\/span>(<\/span>key:<\/span> key)<\/span>;<\/span><\/p>\n

@override<\/span>
\n Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>
\n return<\/span> Card<\/span>(<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n Padding<\/span>(<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>12<\/span>)<\/span>,<\/span>
\n child:<\/span> Text<\/span>(<\/span>
\n '\u793a\u4f8b2：\u5916\u8fb9\u8ddd（Margin）'<\/span><\/span>,<\/span>
\n style:<\/span> TextStyle<\/span>(<\/span>fontWeight:<\/span> FontWeight<\/span>.<\/span>bold,<\/span> fontSize:<\/span> 16<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n Padding<\/span>(<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n children:<\/span> [<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n margin:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>8<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>blue.<\/span>shade100,<\/span>
\n child:<\/span> Center<\/span>(<\/span>child:<\/span> Text<\/span>(<\/span>'\u56db\u5468\u5916\u8fb9\u8ddd 8'<\/span><\/span>)<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n margin:<\/span> EdgeInsets<\/span>.<\/span>symmetric<\/span>(<\/span>horizontal:<\/span> 16<\/span>,<\/span> vertical:<\/span> 8<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>green.<\/span>shade100,<\/span>
\n child:<\/span> Center<\/span>(<\/span>child:<\/span> Text<\/span>(<\/span>'\u6c34\u5e7316，\u5782\u76f48'<\/span><\/span>)<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n margin:<\/span> EdgeInsets<\/span>.<\/span>only<\/span>(<\/span>bottom:<\/span> 16<\/span>)<\/span>,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>orange.<\/span>shade100,<\/span>
\n child:<\/span> Center<\/span>(<\/span>child:<\/span> Text<\/span>(<\/span>'\u53ea\u6709\u5e95\u90e8\u5916\u8fb9\u8ddd 16'<\/span><\/span>)<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

class<\/span> AlignmentExample<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>
\n const<\/span> AlignmentExample<\/span>(<\/span>{<\/span>Key<\/span>?<\/span> key}<\/span>)<\/span> :<\/span> super<\/span>(<\/span>key:<\/span> key)<\/span>;<\/span><\/p>\n

@override<\/span>
\n Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>
\n return<\/span> Card<\/span>(<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n Padding<\/span>(<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>12<\/span>)<\/span>,<\/span>
\n child:<\/span> Text<\/span>(<\/span>
\n '\u793a\u4f8b3：\u5bf9\u9f50（Alignment）'<\/span><\/span>,<\/span>
\n style:<\/span> TextStyle<\/span>(<\/span>fontWeight:<\/span> FontWeight<\/span>.<\/span>bold,<\/span> fontSize:<\/span> 16<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> Padding<\/span>(<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n children:<\/span> [<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n height:<\/span> 60<\/span>,<\/span>
\n alignment:<\/span> Alignment<\/span>.<\/span>center,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>blue.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u5c45\u4e2d\u5bf9\u9f50'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n height:<\/span> 60<\/span>,<\/span>
\n alignment:<\/span> Alignment<\/span>.<\/span>centerLeft,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>green.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u5de6\u5bf9\u9f50'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n width:<\/span> double.<\/span>infinity,<\/span>
\n height:<\/span> 60<\/span>,<\/span>
\n alignment:<\/span> Alignment<\/span>.<\/span>centerRight,<\/span>
\n color:<\/span> Colors<\/span>.<\/span>orange.<\/span>shade50,<\/span>
\n child:<\/span> Text<\/span>(<\/span>'\u53f3\u5bf9\u9f50'<\/span><\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

class<\/span> CombinedLayoutExample<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>
\n const<\/span> CombinedLayoutExample<\/span>(<\/span>{<\/span>Key<\/span>?<\/span> key}<\/span>)<\/span> :<\/span> super<\/span>(<\/span>key:<\/span> key)<\/span>;<\/span><\/p>\n

@override<\/span>
\n Widget<\/span> build<\/span>(<\/span>BuildContext<\/span> context)<\/span> {<\/span>
\n return<\/span> Card<\/span>(<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n Padding<\/span>(<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>12<\/span>)<\/span>,<\/span>
\n child:<\/span> Text<\/span>(<\/span>
\n '\u793a\u4f8b4：\u7ec4\u5408\u5e03\u5c40'<\/span><\/span>,<\/span>
\n style:<\/span> TextStyle<\/span>(<\/span>fontWeight:<\/span> FontWeight<\/span>.<\/span>bold,<\/span> fontSize:<\/span> 16<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n Container<\/span>(<\/span>
\n margin:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>16<\/span>)<\/span>,<\/span>
\n padding:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>20<\/span>)<\/span>,<\/span>
\n decoration:<\/span> BoxDecoration<\/span>(<\/span>
\n color:<\/span> Colors<\/span>.<\/span>white,<\/span>
\n borderRadius:<\/span> BorderRadius<\/span>.<\/span>circular<\/span>(<\/span>12<\/span>)<\/span>,<\/span>
\n boxShadow:<\/span> [<\/span>
\n BoxShadow<\/span>(<\/span>
\n color:<\/span> Colors<\/span>.<\/span>black.<\/span>withOpacity<\/span>(<\/span>0.1<\/span>)<\/span>,<\/span>
\n blurRadius:<\/span> 8<\/span>,<\/span>
\n offset:<\/span> Offset<\/span>(<\/span>0<\/span>,<\/span> 4<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n child:<\/span> Column<\/span>(<\/span>
\n crossAxisAlignment:<\/span> CrossAxisAlignment<\/span>.<\/span>start,<\/span>
\n children:<\/span> [<\/span>
\n Container<\/span>(<\/span>
\n padding:<\/span> EdgeInsets<\/span>.<\/span>symmetric<\/span>(<\/span>horizontal:<\/span> 12<\/span>,<\/span> vertical:<\/span> 8<\/span>)<\/span>,<\/span>
\n decoration:<\/span> BoxDecoration<\/span>(<\/span>
\n color:<\/span> Colors<\/span>.<\/span>blue.<\/span>shade50,<\/span>
\n borderRadius:<\/span> BorderRadius<\/span>.<\/span>circular<\/span>(<\/span>8<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n child:<\/span> Row<\/span>(<\/span>
\n children:<\/span> [<\/span>
\n Icon<\/span>(<\/span>Icons<\/span>.<\/span>info,<\/span> color:<\/span> Colors<\/span>.<\/span>blue)<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>width:<\/span> 8<\/span>)<\/span>,<\/span>
\n Text<\/span>(<\/span>'\u63d0\u793a\u4fe1\u606f'<\/span><\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n Text<\/span>(<\/span>
\n '\u8fd9\u662f\u4e00\u4e2a\u7ec4\u5408\u5e03\u5c40\u7684\u793a\u4f8b，\u5305\u542b\u4e86\u5185\u8fb9\u8ddd\u3001\u5916\u8fb9\u8ddd\u3001\u5bf9\u9f50\u7b49\u5c5e\u6027\u3002'<\/span><\/span>,<\/span>
\n style:<\/span> TextStyle<\/span>(<\/span>color:<\/span> Colors<\/span>.<\/span>grey[<\/span>700<\/span>]<\/span>)<\/span>,<\/span>
\n )<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>,<\/span>
\n const<\/span> SizedBox<\/span>(<\/span>height:<\/span> 12<\/span>)<\/span>,<\/span>
\n ]<\/span>,<\/span>
\n )<\/span>,<\/span>
\n )<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\n

🚀 \u5feb\u901f\u8fd0\u884c<\/h3>\n

\u793a\u4f8b\u5e94\u7528<\/h4>\n

\u672c\u7bc7\u6587\u7ae0\u7684\u793a\u4f8b\u9879\u76ee：flutter_examples\/container_widget_demo_07<\/p>\n

\u8fd0\u884c\u6b65\u9aa4<\/h4>\n

# \u8fdb\u5165\u793a\u4f8b\u9879\u76ee\u76ee\u5f55<\/span>
\ncd<\/span> flutter_examples\/container_widget_demo_07<\/p>\n

# \u8fd0\u884c\u5e94\u7528（\u9e3f\u8499\u865a\u62df\u673a）<\/span>
\nflutter run -d 127.0<\/span>.0.1:5555<\/p>\n

# \u6216\u8fd0\u884c\u5e94\u7528（\u5176\u4ed6\u8bbe\u5907）<\/span>
\nflutter run<\/p>\n

\u6f14\u793a\u5185\u5bb9<\/h4>\n

\u8fd0\u884c\u5e94\u7528\u540e，\u60a8\u5c06\u770b\u5230\u672c\u7bc7\u6587\u7ae0\u7684\u793a\u4f8b：<\/p>\n