Flutter基础widgets教程-SizedBox篇

1 SizedBox

两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小

2 构造函数

       SizedBox({
           Key key,
           this.width,
           this.height,
           Widget child
       })
   
  

3 常用属性

3.1 width：SizedBox的宽

width: 250,
  

3.2 height：SizedBox的高

height: 250,
  

3.3 child：SizedBox的子widget

child: Text("内容"),
  

4.显示效果

5.代码

       import 'package:flutter/material.dart';
       import 'package:flutter/services.dart';
       import 'package:flutter_markdown/flutter_markdown.dart';
       // 字体适配
       import '../../utils/app_size.dart';
       class ListSizedBox extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
          return DefaultTabController(
             length: 2,
             child: Scaffold(
               appBar: AppBar(
                 title: Text('SizedBox'),
                 backgroundColor: Color(0xFFfafcff),
                 bottom: TabBar(labelColor: Color(0xff030303), tabs: [
                   Tab(
                     text: "效果",
                   ),
                   Tab(
                     text: "属性",
                   )
                 ]),
               ),
               body: TabBarView(children: [
                 Container(
                     decoration: new BoxDecoration(
                       color: new Color(0xffffffff),
                       borderRadius: new BorderRadius.circular((AppSize.width(20))),
                     ),
                     child: ShowEffect()),
                 Container(
                     decoration: new BoxDecoration(
                       color: new Color(0xffffffff),
                       borderRadius: new BorderRadius.circular((AppSize.width(20))),
                     ),
                     child: ShowAttribute()),
               ]),
             ),
           );
         }
       }
       // 效果
       class ShowEffect extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
          return Row(children: <Widget>[
             SizedBox(
               width: 150.0,
               height: 150.0,
               child: Container(
                 margin: EdgeInsets.all(20.0),
                 width: 200.0,
                 height: 200.0,
                 color: Colors.blue,
               ),
             ),
             SizedBox(
               width: 100.0,
               height: 100.0,
               child: Container(
                 margin: EdgeInsets.all(20.0),
                 width: 200.0,
                 height: 200.0,
                 color: Colors.yellow,
               ),
             ),
             SizedBox(
               width: 100.0,
               height: 100.0,
               child: Container(
                 margin: EdgeInsets.all(20.0),
                 width: 200.0,
                 height: 200.0,
                 color: Colors.red,
               ),
             )
           ]);
         }
       }
       // 属性
       class ShowAttribute extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
          return Container(
             child: FutureBuilder(
               future: rootBundle.loadString('lib/markdown/sizedBox.md'),
               builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  return Markdown(
                     data: snapshot.data,
                     selectable: true,
                   );
                 } else {
                  return Center(
                     child: Text("加载中..."),
                   );
                 }
               },
             ),
           );
         }
       }
   
  

   
  
  

此代码已共享到码云，已对60多种widget做演示及解释。一直更新中

https://gitee.com/nmgwap/flutter_app