Flutter(九)基础控件-Container

2021-12-17 本文已影响0人学_iOS

感君一回顾，思君朝与暮。

<一>创建视图

Container类似我们iOS中的UIView大致可以理解为容器的意思
Container里面的child属性代表着他可以装载控件类型的widget

代码

import 'package:flutter/material.dart';

class FMContainerVC extends StatelessWidget {
const FMContainerVC({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
  return Container(
    child: Scaffold(
      appBar: AppBar(
        title: const Text(
          "Container",
        ),
        backgroundColor: Colors.lightBlue,
      ),
      body: _container(),
    ),
  );
}
Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
  );
}
}

颜色和大小

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    // 直接使用 color 属性改变背景色，使用 width 设置宽度，使用 height 属性设置高度。
    // width: 200,
    // height: 200,
    color: Colors.red,
    // // 使用 constraints 属性来改变 container 大小
    // constraints: const BoxConstraints.expand(
    //   width: 320,
    //   height: 200,
    // ),
    // 执行约束
    margin: const EdgeInsets.only(left: 10, top: 10, right: 10, bottom: 10),
  );
}

Border 边框设置
注意：decoration 属性和 color 属性不可以同时使用，否则会如下报错。在 decoration 属性里也可以设置背景色color，如需要同时使用边框和背景色，可以在decoration里设置。

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    // 直接使用 color 属性改变背景色，使用 width 设置宽度，使用 height 属性设置高度。
    // width: 200,
    // height: 200,
    // color: Colors.red,
    // // 使用 constraints 属性来改变 container 大小
    // constraints: const BoxConstraints.expand(
    //   width: 320,
    //   height: 200,
    // ),
    // 执行约束
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.red,
        width: 3,
      ),
      color: Colors.yellow,
      //边框圆角
      borderRadius:const BorderRadius.only(
          topLeft: Radius.circular(0),
          topRight: Radius.circular(0),
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30)),
    ),
  );
}

自定义边框
注意：使用自定义 border 时，不可以使用 borderRadius 属性，否则会报错

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    decoration: const BoxDecoration(
      // border: Border.all(
      //   color: Colors.red,
      //   width: 3,
      // ),
      border: Border(
        top: BorderSide(
          width: 3,
          color: Colors.cyan,
        ),
        left: BorderSide(
          width: 3,
          color: Colors.blue,
        ),
        right: BorderSide(
          width: 3,
          color: Colors.black,
        ),
        bottom: BorderSide(
          width: 3,
          color: Colors.orange,
        ),
      ),
    ),
  );
}

底色渐变

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.red,
        width: 3,
      ),
      borderRadius: BorderRadius.circular(30),
      gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      // border: Border(
      //   top: BorderSide(
      //     width: 3,
      //     color: Colors.cyan,
      //   ),
      //   left: BorderSide(
      //     width: 3,
      //     color: Colors.blue,
      //   ),
      //   right: BorderSide(
      //     width: 3,
      //     color: Colors.black,
      //   ),
      //   bottom: BorderSide(
      //     width: 3,
      //     color: Colors.orange,
      //   ),
      // ),
    ),
  );
}

设置背景图

  Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.red,
        width: 3,
      ),
      borderRadius: BorderRadius.circular(30),
      image: DecorationImage(
        image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        // centerSlice: Rect.largest,
      ),
      gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      // border: Border(
      //   top: BorderSide(
      //     width: 3,
      //     color: Colors.cyan,
      //   ),
      //   left: BorderSide(
      //     width: 3,
      //     color: Colors.blue,
      //   ),
      //   right: BorderSide(
      //     width: 3,
      //     color: Colors.black,
      //   ),
      //   bottom: BorderSide(
      //     width: 3,
      //     color: Colors.orange,
      //   ),
      // ),
    ),
  );
}

设置阴影

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.red,
        width: 3,
      ),
      borderRadius: BorderRadius.circular(30),
      boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
      image: DecorationImage(
        image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        // centerSlice: Rect.largest,
      ),
      gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      // border: Border(
      //   top: BorderSide(
      //     width: 3,
      //     color: Colors.cyan,
      //   ),
      //   left: BorderSide(
      //     width: 3,
      //     color: Colors.blue,
      //   ),
      //   right: BorderSide(
      //     width: 3,
      //     color: Colors.black,
      //   ),
      //   bottom: BorderSide(
      //     width: 3,
      //     color: Colors.orange,
      //   ),
      // ),
    ),
  );
}

child 子控件
使用 child 属性给 container 添加子控件，使用 padding 属性设置子控件的范围，使用 alignment 来设置子控件的居中属性。
padding 属性，你可以理解为 child 距离该 container 4个边框的边界距离，例如 padding: const EdgeInsets.all(30),
就是距离 child 上方距离 container 上左下右4个方向各30像素

Container _container() {
  return Container(
    // 在这里尝试 Container 属性效果
    margin: const EdgeInsets.only(left: 100, top: 100, right: 100, bottom: 100),
    transform: Matrix4.rotationZ(0.1),
     // alignment: Alignment.centerLeft,
    padding: const EdgeInsets.all(30),
    child:const Text(
      "Container",
      style: TextStyle(
        fontSize: 30,
        color: Colors.red,
        backgroundColor: Colors.orange,
      ),
    ),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.red,
        width: 3,
      ),
      borderRadius: BorderRadius.circular(30),
      boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
      //旋转
      image: DecorationImage(
        image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        // centerSlice: Rect.largest,
      ),
      gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      // border: Border(
      //   top: BorderSide(
      //     width: 3,
      //     color: Colors.cyan,
      //   ),
      //   left: BorderSide(
      //     width: 3,
      //     color: Colors.blue,
      //   ),
      //   right: BorderSide(
      //     width: 3,
      //     color: Colors.black,
      //   ),
      //   bottom: BorderSide(
      //     width: 3,
      //     color: Colors.orange,
      //   ),
      // ),
    ),
  );
}

Flutter(九)基础控件-Container

感君一回顾，思君朝与暮。

<一>创建视图

猜你喜欢

热点阅读