【Flutter实战】定位装饰权重组件及柱状图案例

Container

Container(
	child: Text('老孟'),)

Container(
	color: Colors.blue,child: Text('老孟'),)

Container(
      color: Colors.blue,child: Container(
        margin: EdgeInsets.all(10),padding: EdgeInsets.all(20),color: Colors.red,),)

Container(
  child: Text('老孟，专注分享Flutter技术及应用'),decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue),)

Container(
        child: Text('老孟，专注分享Flutter技术及应用'),padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(
            shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(20)),)

Container(
        child: Text('老孟，专注分享Flutter技术及应用'),decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),border: Border.all(
            color: Colors.blue,width: 2,)

Container(
      height: 200,width: 200,decoration: BoxDecoration(
        image:  DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),fit: BoxFit.cover,border: Border.all(
          color: Colors.blue,borderRadius: BorderRadius.circular(12),)

Container(
      height: 200,decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),shape: BoxShape.circle,)

Container(
        color: Colors.blue,child: Text('老孟，一个有态度的程序员'),alignment: Alignment.center,)

Container(
  alignment: Alignment(-.5,-.5),child: Text('老孟，专注分享Flutter技术及应用'),)

Container(
        color: Colors.blue,height: 60,width: 250,)

Container(
        color: Colors.blue,constraints: BoxConstraints(
          maxHeight: 100,maxWidth: 300,minHeight: 100,minWidth: 100,)

Container(
        color: Colors.blue,transform: Matrix4.rotationZ(0.5),)

SizedBox

SizedBox(
        height: 60,child: Container(
          color: Colors.blue,)

SizedBox(
  height: double.infinity,width: double.infinity,...
)

SizedBox.expand(
  child: Text('老孟，专注分享Flutter技术及应用'),)

Column(
          children: <Widget>[
            Container(height: 30,color: Colors.blue,SizedBox(height: 30,Container(height: 30,],)

AspectRatio

Container(
        height: 300,width: 300,child: AspectRatio(
          aspectRatio: 2 / 1,child: Container(color: Colors.red,)

FractionallySizedBox

Container(
  height: 200,child: FractionallySizedBox(
    widthFactor: .8,heightFactor: .3,child: Container(
      color: Colors.red,)

FractionallySizedBox(
  alignment: Alignment.center,...
)

权重组件

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,height: 50,width: 100,Flexible(
            child: Container(
              color: Colors.red,)
        ),Container(
          color: Colors.blue,)

Column(
      children: <Widget>[
        Flexible(
          flex: 1,child: Container(
            color: Colors.blue,child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),Flexible(
          flex: 2,child: Container(
            color: Colors.red,child: Text('2 Flex/ 6 Total',Flexible(
          flex: 3,child: Container(
            color: Colors.green,child: Text('3 Flex/ 6 Total',)

• tight：必须（强制）填满剩余空间。
• loose：尽可能大的填满剩余空间，但是可以不填满。

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,child: Text('Container',)

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,)

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,Flexible(
          child: OutlineButton(
            child: Text('OutlineButton'),)

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row],[Column],or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key key,int flex = 1,@required Widget child,}) : super(key: key,flex: flex,fit: FlexFit.tight,child: child);
}

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,Expanded(
          child: OutlineButton(
            child: Text('OutlineButton'),)

@override
Widget build(BuildContext context) {
  return Expanded(
    flex: flex,child: const SizedBox.shrink(),);
}

Row(
  children: <Widget>[
    Container(width: 100,color: Colors.green,Spacer(flex: 2,Container(width: 100,Spacer(),)

• Spacer 是通过 Expanded 实现的，Expanded继承自Flexible。
• 填满剩余空间直接使用Expanded更方便。
• Spacer 用于撑开 Row、Column、Flex 的子组件的空隙。

仿 掘金-我 效果