Flutter基础组件-Container 一、Container-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter基础组件-Container 一、Container。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Container

简单介绍：Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。

注意:使用Container时，通常要有一个父控件，一般情况下不单独使用Container。常用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。

1、构造方法讲解

Container({
    Key key,
    this.alignment,//控制child的对齐方式
    this.padding, //设置内边距
    Color color, //设置背景颜色
    Decoration decoration,//绘制在child下层的装饰，不能与color同时使用
    this.foregroundDecoration,//绘制在child上层的装饰
    double width, //宽
    double height, //高
    BoxConstraints constraints,添加到child上额外的约束条件
    this.margin,//外边距
    this.transform,//设置container的变换矩阵，类型为Matrix4
    this.child, //子组件
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）

BoxDecoration ：


    const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,//border四周添加阴影效果
    this.gradient,//装饰器的过度效果，比如可以用来给组件添加一个蒙层
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
    })

2 、容器组件的属性及用法

Container(
        width: 200,
        height: 200,
//        color: Colors.black12,//设置了decoration就不能设置color,否着会报错
        margin: EdgeInsets.all(20),//margin值,外部值
        padding: EdgeInsets.all(20),//padding值,自身内部
        alignment: Alignment.center,
        decoration:BoxDecoration(
          color: Colors.white,
          border: new Border.all(
            color: Colors.green,
            width: 4.0,
          ),//
          boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0),
              blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00),
              offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],//四边的阴影值
          borderRadius: const BorderRadius.all(const Radius.circular(20)),//圆角弧度
//          gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)//环形渐变
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14) //扫描式渐变
        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))// 线性渐变

        ),
        transform: new Matrix4.rotationZ(0.3),//变换矩阵
        child: Text(
          '文本案例',
          style: TextStyle(
              fontSize: 12,
              color: Colors.green,
              decoration: TextDecoration.underline,//下划线,删除线
              fontWeight:FontWeight.bold,//字体粗度
          ),
          maxLines: 1,//最大行数
          textAlign: TextAlign.left,   //相对于父布局的对齐方式
          textDirection: TextDirection.rtl,       //文本开始方向,有的语言是从右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式显示
            textScaleFactor:3,//文本的缩放比例
        ),
      ),

3、Container常用属性及描述：

容器组件（Container）可以理解为在Android中的RelativeLayout或LinearLayout等，Container类似于iOS中的UIView，具有绘制、定位、调整大小功能。

属性名	类型	说明
key	Key	Container唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制child的对其方式，如果Container或者Container父节点尺寸大于Child的尺寸，这个属性设置会生效，有很多种对齐方式
padding	EdgeInsetsGeometry	Decoration内部的空白区域，如果有child的话，child位于padding内部
color	Color	用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration	Decoration	绘制在child后面的装饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration	Decoration	绘制在child前面的装饰
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	添加到child上额外的约束条件
margin	EdgeInsetsGeometry	围绕在Decoration和child之外的空白区域，不属于内容区域
transform	Matrix4	设置Container的变换矩阵，类型为Matrix4
child	Widget	Container中的内容Widget

二、文本组件Text主要属性及用法

    Text(
          '文本案例文本案例文本案例文本案例',
          style: TextStyle(
              fontSize: 18,
              color: Colors.green,
              decoration: TextDecoration.underline,//下划线,删除线
              fontWeight:FontWeight.bold,//字体粗度
          ),
          maxLines: 1,//最大行数
          textAlign: TextAlign.left,   //相对于父布局的对齐方式
          textDirection: TextDirection.rtl,       //文本开始方向,有的语言是从右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式显示
          textScaleFactor:3,//文本的缩放比例
        ),

三、滑动布局

1、 ListView

class _ListViewTestState extends State<ListViewTest> {
  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() {});
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Widget divider1 = Divider(
      color: Colors.blue,
    );
    Widget divider2 = Divider(color: Colors.green);
    return Scaffold(
      appBar: AppBar(
        title: Text('listview demo'),
      ),
      body: ListView.separated(
        //每个item的构造器
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text('listview demo== $index'));
          },
          //分割器
          separatorBuilder: (BuildContext context, int index) {
            return index % 2 == 0 ? divider1 : divider2;
          },
          itemCount: 50),
    );
  }
}

2 、GridView

/**
 * 网格布局
 */
class GridViewDemo extends StatelessWidget {
  // 自行设置
  final List<String> letters = ["自行加载数据" ];

  // 用于区分网格单元
  final List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.pink
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView Demo'),
      ),
      body: GridView.builder(
          scrollDirection: Axis.vertical,
          padding: const EdgeInsets.all(10.0),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //列数
              crossAxisCount: 3,
              //横轴间距
              crossAxisSpacing: 10,
              //数轴间距
              mainAxisSpacing: 10,
              //子widget的宽高比
              childAspectRatio: 1),
          itemCount: letters.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: (){
                 print(index);
              },
                child: Container(
                    color: colors[index % 4],
                    child: Text(letters[index]),
                    alignment: Alignment.center))
          }),
    );
  }
}