Flutter小知识

Container组件margin和padding属性的区别:

Container(
  margin: EdgeInsets.all(20.0), //容器外补白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器内补白
  color: Colors.orange,
  child: Text("Hello world!"),
),

可以发现，直观的感觉就是margin的留白是在容器外部，而padding的留白是在容器内部，读者需要记住这个差异。事实上，Container内margin和padding都是通过Padding 组件来实现的，上面的示例代码实际上等价于：

...
Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),
...

Navigator路由跳转，在main.dart中是不起作用的，无法跳转，需要另起一个子页面，才能跳转

如果不想用Container来写外表样式，可以利用DecoratedBox控件来代替，该控件是专门用来显示样式的控件

 DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景渐变
      borderRadius: BorderRadius.circular(3.0), //3像素圆角
      boxShadow: [ //阴影
        BoxShadow(
            color:Colors.black54,
            offset: Offset(2.0,2.0),
            blurRadius: 4.0
        )
      ]
    ),
  child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)

使容器占满整个屏幕的方法

方法一
使用ConstrainedBox控件

ConstrainedBox(
  constraints: BoxConstraints.expand(),		// 占满容器
  child: Stack(
    alignment:Alignment.center , 
    children: <Widget>[
      Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
        color: Colors.red,
      ),
      Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      ),
      Positioned(
        top: 18.0,
        child: Text("Your friend"),
      )        
    ],
  ),
);

方法二
使用ListView控件包裹Container，Container会自动填满全部

ListView(
	children<Widget>[
		Container(color:Colors.red)
	]
)

通过比例生成容器

性能优化

生成列表项的时候，或者生成Container页面的时候，高度如果可以确定，最好写一个固定值，这样的话，性能消耗小