flutter 组件 Stepper,Step,Padding,Align,Center,FittedBox,AspectRatio,ConstrainedBox

1.Stepper,Step

Stepper({
    Key key,
    @required this.steps, //step类型的子集
    this.physics,
    this.type = StepperType.vertical, //方向
    this.currentStep = 0, //当前位置
    this.onStepTapped, //点击事件
    this.onStepContinue, //继续事件
    this.onStepCancel, //返回
    this.controlsBuilder, //操作的控制builder
  })

const Step({
    @required this.title, //标题
    this.subtitle, //副标题
    @required this.content, //内容
    this.state = StepState.indexed, //图标的状态
    this.isActive = false, //是否是active
})

import 'package:flutter/material.dart';

class MyComponent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyComponent();
  }
}

class _MyComponent extends State<MyComponent> {
  int _step = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Component"),
      ),
      body: Column(
        children: <Widget>[
          Stepper(
            currentStep: _step,

            //继续的回调
            onStepContinue: () {
              if (_step == 3) {
                setState(() {
                  _step = 0;
                });
              } else {
                setState(() {
                  _step += 1;
                });
              }
            },
            //控制按钮的builder
            controlsBuilder: (BuildContext context,
                {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
              return Row(
                children: <Widget>[
                  RaisedButton(
                    onPressed: onStepContinue,
                    child: const Text('继续'),
                  )
                ],
              );
            },
            steps: [
              Step(
                  title: Text("标题"),
                  content: Container(
                    width: 150.0,
                    height: 50.0,
                    color: Colors.black12,
                  ),
                  state: StepState.complete,
                  isActive: true),
              Step(
                title: Text("标题"),
                content: Text("内容"),
                state: StepState.disabled,
              ),
              Step(
                title: Text("标题"),
                content: Text("内容"),
                state: StepState.editing,
              ),
              Step(
                  title: Text("标题"),
                  subtitle: Text("副标题"),
                  content: Text("内容"),
                  isActive: true)
            ],
          )
        ],
      ),
    );
  }
}

     

     

2.Padding,Align,Center 

const Padding({
    Key key,
    @required this.padding, //间距padding
    Widget child, //子集
})

//居中

//当widthFactor和heightFactor为null的时候，
//当其有限制条件的时候，Align会根据限制条件尽量的扩展自己的尺寸，
//当没有限制条件的时候，会调整到child的尺寸；

//当widthFactor或者heightFactor不为null的时候，
//Aligin会根据factor属性，扩展自己的尺寸，
//例如设置widthFactor为2.0的时候，那么，Align的宽度将会是child的两倍


const Center({ 
    Key key, 

    double widthFactor, 

    double heightFactor, 

    Widget child 

})

const Align({
    Key key,
    this.alignment = Alignment.center, //对齐方式
    this.widthFactor, //同上
    this.heightFactor, //同上
    Widget child, //子集
})

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          //Container有对齐方式，这里只是测试
          //Align
          Container(
            width: 200.0,
            height: 100.0,
            color: Colors.black12,
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Align(
                alignment: Alignment.bottomRight,
                child: Text("内容很少"),
              ),
            ),
          ),
          //Container有对齐方式，这里只是测试
          //Center
          Container(
            margin: EdgeInsets.only(top: 15.0),
            width: 200.0,
            height: 100.0,
            color: Colors.black12,
            child: Padding(
              padding: EdgeInsets.all(10.0),
              child: Center(
                child: Text("内容"),
              ),
            ),
          )
        ],
      ),
    );
  }
}

3.FittedBox

//类似于图片的那种缩放满足容器的大小的那种盒模型

//如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局

//如果没有外部约束条件，则跟child尺寸一致，指定的缩放以及位置属性将不起作用

const FittedBox({
    Key key,
    this.fit = BoxFit.contain, //类似图片的fit
    this.alignment = Alignment.center, //对齐方式
    Widget child, //子集
})

 

import 'package:flutter/material.dart';

class MyIos extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyIos();
  }
}

class _MyIos extends State<MyIos> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Layout"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: 200.0,
            height: 200.0,
            color: Colors.black12,
            child: FittedBox(
              fit: BoxFit.contain,
              child: Text("567"),
            ),
          ),
          Container(
            width: 200.0,
            margin: EdgeInsets.only(top: 15.0),
            height: 200.0,
            color: Colors.black12,
            child: FittedBox(
              alignment: Alignment.bottomRight,
              fit: BoxFit.scaleDown,
              child: Text("567"),
            ),
          )
        ],
      ),
    );
  }
}

4.AspectRatio

//场景是相机，相机的预览尺寸都是固定的几个值，因此不能随意去设置相机的显示区域，必须按照比率进行显示
//AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域
//如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率

const AspectRatio({
    Key key,
    @required this.aspectRatio, //宽高比
    Widget child,
}) 

 

Container(
   height: 200.0,
   child: new AspectRatio(
       aspectRatio: 1.5,
       child: new Container(
          color: Colors.red,
       ),
   ),
)

// 300 x 200的区域

5.ConstrainedBox

//约束条件

ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
})

const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
});

 

//最小宽度和最小高度
//Container宽度全屏，高度只有150 
ConstrainedBox(
    constraints: BoxConstraints(
       minWidth: 100.0,
       minHeight: 150.0
    ),
    child: Container(
       color: Colors.black12,
    ),
 )