{"id":561,"date":"2023-02-18T18:24:16","date_gmt":"2023-02-18T10:24:16","guid":{"rendered":"http:\/\/gjweb.top\/?p=561"},"modified":"2023-02-18T18:24:16","modified_gmt":"2023-02-18T10:24:16","slug":"04-%e5%b8%83%e5%b1%80%e7%bb%84%e4%bb%b6%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=561","title":{"rendered":"04. \u5e03\u5c40\u7ec4\u4ef6\u8be6\u89e3"},"content":{"rendered":"\n

ListView \u5217\u8868\u7ec4\u4ef6<\/h2>\n\n\n\n
\u540d\u79f0<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
scrollDirection<\/td>Axis.horizntal \u6c34\u5e73\u5217\u8868 Axis.vertical \u5782\u76f4\u5217\u8868<\/td>Axis<\/td><\/tr>
padding<\/td>\u5185\u8fb9\u8ddd<\/td>EdgeInsetsGeometry<\/td><\/tr>
resolve<\/td>\u53cd\u5411\u6392\u5e8f<\/td>bool<\/td><\/tr>
children<\/td>\u5b50\u96c6<\/td>List<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
ListView(
    scrollDirection:Axis.horizntal\uff0c
    children:[
        ListTile(text: const Text(\"hello flutter\")),
        ListTile(text: const Text(\"hello flutter\")),
        ListTile(text: const Text(\"hello flutter\")),
        ListTile(text: const Text(\"hello flutter\")),
        ListTile(text: const Text(\"hello flutter\")),
    ]
)<\/code><\/pre>\n\n\n\n
\u52a8\u6001\u6e32\u67d3\u5217\u8868<\/h3>\n\n\n\n
List list = [\"hello flutter\",\"hello dart\"]
ListView.builder(
    itemCount:list.length,
    itenBuilder:(context,index){
        return ListTile(title:Text(\"${list[index]}\"))
    }
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
GridView \u7f51\u683c\u5e03\u5c40\u7ec4\u4ef6<\/h2>\n\n\n\n
\u5feb\u901f\u5b9e\u73b0 \u5bab\u683c\u5f0f<\/strong> \u5e03\u5c40<\/p>\n\n\n\n
\u540d\u79f0<\/th>\u8bf4\u660e<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
scrollDirection<\/td>\u6eda\u52a8\u65b9\u5f0f<\/td>Axis<\/td><\/tr>
padding<\/td>\u5185\u8fb9\u8ddd<\/td>EdgeInsetsGeometry<\/td><\/tr>
resolve<\/td>\u6570\u7ec4\u7ffb\u8f6c<\/td>bool<\/td><\/tr>
crossAxisSpacing<\/td>\u6c34\u5e73\u95f4\u8ddd<\/td>double<\/td><\/tr>
mainAxisSpacing<\/td>\u5782\u76f4\u95f4\u8ddd<\/td>double<\/td><\/tr>
maxCrossAxisExtent<\/td>\u6a2a\u8f74\u7684\u6700\u5927\u957f\u5ea6<\/td>\u7528\u5728GridView.extent<\/td><\/tr>
childAspectRatio<\/td>\u5bbd\u9ad8\u6bd4<\/td>double<\/td><\/tr>
children<\/td>\u5b50\u96c6<\/td>List<\/td><\/tr>
shrinkWrap<\/td>\u5b8c\u5168\u652f\u914d\u5b50\u5143\u7d20\u9ad8\u5ea6<\/td>bool<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
GridView.count<\/h3>\n\n\n\n
\u6a2a\u8f74\u56fa\u5b9a\u6570\u91cf\u7684\u5e03\u5c40<\/p>\n\n\n\n
GridView.count(
    crossAxisCount:3,
    children:[
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
    ]
)<\/code><\/pre>\n\n\n\n
GridView.extent<\/h3>\n\n\n\n
\u6a2a\u8f74\u7684\u6700\u5927\u957f\u5ea6<\/p>\n\n\n\n
GridView.extent(
    maxCrossAxisExtent:2,
    children:[
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
    ]
)<\/code><\/pre>\n\n\n\n
GridView.builder<\/h3>\n\n\n\n
\u52a8\u6001\u6e32\u67d3 GridView \u5217\u8868<\/p>\n\n\n\n
List list = [\"hello flutter\",\"hello dart\"];
GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, \/\/\u6c34\u5e73\u5b50 Widget \u4e4b\u95f4\u95f4\u8ddd
        mainAxisSpacing: 10.0, \/\/\u5782\u76f4\u5b50 Widget \u4e4b\u95f4\u95f4\u8ddd
        crossAxisCount: 2, \/\/\u4e00\u884c\u7684 Widget \u6570\u91cf
    ),
    itemCount:list.length,
    itemBuilder:(context,index){
        return Text(\"${list[index]}\")
    }
)<\/code><\/pre>\n\n\n\n
padding \u5185\u8fb9\u8ddd\u7ec4\u4ef6<\/h2>\n\n\n\n
\u5305\u88f9\u7684\u5b50\u5143\u7d20\u53ef\u4ee5\u5e26\u6709 padding \u7684\u8fb9\u8ddd<\/p>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
padding<\/td>\u5185\u8fb9\u8ddd ( \u5fc5\u586b )<\/td>EdgeInsets.fromLTRB(left, top, right, bottom)<\/td><\/tr>
child<\/td>\u5b50\u7ec4\u4ef6<\/td>Widget<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Padding(
    padding:EdgeInsets.fromLTRB(0, 0, 0, 0),
    child:const Text(\"hello world\")
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
Row \u548c Column \u7ebf\u6027\u5e03\u5c40<\/h2>\n\n\n\n
\u7c7b\u4f3c\u4e8e css \u7684 flex \u601d\u60f3<\/p>\n\n\n\n
Row \u6c34\u5e73\u5e03\u5c40<\/h3>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
mainAxisAlignment<\/td>\u4e3b\u8f74\u5bf9\u9f50\u65b9\u5f0f<\/td>MainAxisAlignment<\/td><\/tr>
crossAxisAlignment<\/td>\u6b21\u8f74\u7684\u5bf9\u9f50\u65b9\u5f0f<\/td>CrossAxisAlignment<\/td><\/tr>
children<\/td>\u5b50\u7ec4\u4ef6\u96c6\u5408<\/td>[<widget>]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    chldren:[]
)<\/code><\/pre>\n\n\n\n
Column \u6c34\u5e73\u5e03\u5c40<\/h3>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
mainAxisAlignment<\/td>\u4e3b\u8f74\u5bf9\u9f50\u65b9\u5f0f<\/td>MainAxisAlignment<\/td><\/tr>
crossAxisAlignment<\/td>\u6b21\u8f74\u7684\u5bf9\u9f50\u65b9\u5f0f<\/td>CrossAxisAlignment<\/td><\/tr>
children<\/td>\u5b50\u7ec4\u4ef6\u96c6\u5408<\/td>[<widget>]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    chldren:[]
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
Flex \u5e03\u5c40<\/h2>\n\n\n\n
\u601d\u60f3\u5b8c\u5168\u548c css \u4e2d\u7684 Flex \u76f8\u540c, \u53ea\u4e0d\u8fc7\u5728 Flutter \u4e2d\u5927\u90e8\u5206\u4f7f\u7528 Row \u548c Column \u642d\u914d Expanded \u5b9e\u73b0<\/p>\n\n\n\n
\u6c34\u5e73\u5e03\u5c40<\/h3>\n\n\n\n
Flex(
\tdirection:Axis.horizontal,
    children:[]
)<\/code><\/pre>\n\n\n\n
\u5782\u76f4\u5e03\u5c40<\/h3>\n\n\n\n
Flex(
\tdirection:Axis.vertical,
    children:[]
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
Expanded \u5bb9\u5668\u5206\u914d\u7ec4\u4ef6<\/h2>\n\n\n\n
\u4e3b\u8981\u7528\u4e8e\u5bb9\u5668\u5185\u90e8\u7684\u586b\u5145\u5206\u914d, \u7ec4\u4ef6\u5185\u90e8\u53ef\u4ee5\u7528 flex \u5c5e\u6027, flex \u7684\u7528\u6cd5\u548c\u601d\u60f3\u540c css \u7684 Flex \u7684 flex \u5c5e\u6027 <\/strong>, \u53ef\u4ee5\u5728 row \\ column \u548c flex \u7ec4\u4ef6\u4e2d\u4f7f\u7528.<\/p>\n\n\n\n
Row(
\tchildren:[
        Expanded(
        \tflex:1,
            child:<widget>
        )
    ]
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u5b9a\u4f4d\u5e03\u5c40 Stack<\/h2>\n\n\n\n
stack \u7c7b\u4f3c\u4e8e css \u4e2d\u7684\u7c98\u6027\u5b9a\u4f4d, \u53ef\u4ee5\u642d\u914d Align \u548c positiond \u6765\u5b9e\u73b0\u9875\u9762\u7684\u5b9a\u4f4d<\/p>\n\n\n\n
stack \u4f1a\u586b\u5145\u4e0a\u7ea7\u5143\u7d20\u7684\u5bbd\u9ad8, \u5982\u679c\u4e3a\u5168\u5c40\u5219\u5168\u5c4f\u586b\u5145<\/p>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u522b<\/th><\/tr><\/thead>
aligment<\/td>\u663e\u793a\u4f4d\u7f6e<\/td>Alignment<\/td><\/tr>
children<\/td>\u5b50\u7c7b\u7684\u96c6\u5408<\/td>[<widget>]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Stack(
    alignment: Alignment.center,
    children:[]
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
Align \u5bf9\u9f50\u7ec4\u4ef6<\/h2>\n\n\n\n
\u5728\u5176\u5143\u7d20\u7684\u6240\u6709\u5b50\u5143\u7d20\u90fd\u4f1a\u7ee7\u627fAlign\u7684\u5c5e\u6027<\/p>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
alignment<\/td>\u663e\u793a\u4f4d\u7f6e<\/td>Alignment<\/td><\/tr>
child<\/td>\u5b50\u7ec4\u4ef6<\/td><widget><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Align(
\talignment: Alignment.center,
    child:<widget>
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
AspectRatio \u5bbd\u9ad8\u6bd4<\/h2>\n\n\n\n
\u4f1a\u8c03\u6574\u5b50\u5143\u7d20\u7684\u5bbd\u9ad8\u6bd4<\/p>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
aspectRatio<\/td>\u5bbd\u9ad8\u6bd4<\/td>int \/ int<\/td><\/tr>
child<\/td>\u81ea\u7ec4\u4ef6<\/td><widget><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
AspectRatio(
\taspectRatio: 2\/1 ,\/\/ \u8868\u793a\u9ad8\u662f\u5bbd\u7684\u4e00\u534a
    child:
)<\/code><\/pre>\n\n\n\n
\n\n\n\n
card \u5361\u7247\u7ec4\u4ef6 \uff08\u5e26\u9634\u5f71\u7684\u76d2\u5b50\uff09<\/h2>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th>\u7c7b\u578b<\/th><\/tr><\/thead>
margin<\/td>\u5916\u8fb9\u8ddd<\/td>EdgeInsets.all(int)<\/td><\/tr>
child<\/td>\u5b50\u7ec4\u4ef6<\/td><widget><\/td><\/tr>
elevation<\/td>\u9634\u5f71\u7684\u6df1\u5ea6<\/td><\/td><\/tr>
color<\/td>\u80cc\u666f\u989c\u8272<\/td><\/td><\/tr>
shadowColor<\/td>\u9634\u5f71\u989c\u8272<\/td><\/td><\/tr>
clipBehavior<\/td>\u5185\u5bb9\u6ea2\u51fa\u88c1\u526a<\/td><\/td><\/tr>
shape<\/td>\u9634\u5f71\u6548\u679c\u7684\u6837\u5f0f<\/td>RoundedRectangleBorder<\/td><\/tr>
<\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Card(
    margin:EdgeInsets.all(10),
    color:Colors.red,
\tchild:<widget>
)<\/code><\/pre>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"
ListView \u5217\u8868\u7ec4\u4ef6 \u540d\u79f0 \u4f5c\u7528 \u7c7b\u578b scrollDirection Axis.horizntal \u6c34 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-561","post","type-post","status-publish","format-standard","hentry","category-flutter"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=561"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/561\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/561\/revisions\/562"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}