Flutter - Container组件

此篇主要理解

Container组件的作用
怎么使用Container
Container中的布局方式
设置Container 的宽高以及背景色
padding布局
margin布局
decoration背景渐变色
在HTML中,盒子元素一直是非常重要的html标签.用于区块的划分.而在Flutter中Container组件则作为 div来使用,用于区域布局.
那么我们在APP中间放置一个Container组件,里面再放置一个Text组件.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '这里是beline的app',
      home: Scaffold(
          appBar: AppBar(title: Text('这里是title')),
          body: Center(
            child: Container(
              child: new Text('this is beline App')
            )
          )),
    );
  }
}

alignment 属性

alignment是对准的意思,顾名思义,用于Container组件内部元素对齐使用,这里随便画了一张图来展示具体的参数定位

无标题的笔记本 (1)-2.jpg

也可以使用提供的对齐方式例如:

center 居中对齐
centerLeft 中间左对齐
bottomCenter 下对齐 (如果在app中不设置Container的宽和高,那么Container的宽和高是等于父级的100%宽和100%高的)
bottomLeft 下左对齐
bottomRight 下右对齐
还有一些没有一一列出,但是我们可以从命名看出,除了center外,都是通过两个方向来表达对齐方式,前一个单词表示纵向轴,第二个单词表示横向轴,例如topRight,既为上方的右边对齐方式

高和宽设置(height,width) 以及背景色(color)

在Flutter中,高和宽的设置和css一样,都是通过height和width进行设置,只是设置的时候我们需要注意,使用的单位都需要是浮点类型,例如500.0
为了直观看的出来我们的这个Container组件具体设置的大小,我们设置一个背景色方便辨认.color属性,调用颜色组件colors设置即可

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '这里是beline的app',
      home: Scaffold(
        appBar: AppBar(title: Text('这里是title')),
        body:Center(
         child: Container(
           child: new Text(
            'Is beline App',
            style: TextStyle(fontSize: 40.0,backgroundColor: Color.fromARGB(255, 144, 213, 43))
           ),
           alignment: Alignment.bottomCenter,
           width: 500.0,
           height: 400.0,
           color: Colors.lightBlue,
         ),
        ),
      ),
    );
  }
}

这里需要注意,颜色组件中有一个容易忽视的地方,color: colors.linghtBlue colors组件是有s的,新学习的时候很容易写掉.

image.png

padding布局

在CSS当中,padding是一个非常常用的属性,这里就不过多讲解具体作用.只把用法进行讲解
在Container组件中,加入padding属性,后面需要设置一个常量,例如:sonst EdgeInsets.all(10.0),就等于我们在css中的padding:10px来理解,上下左右,全部padding的值为10.
如果需要单独设置4个方向的值,我们可以调用EdgeInsets.fromLTRB方法

padding: const EdgeInsets.fromLTRB(left, top, right, bottom)

margin布局

只要学会使用了padding的使用之后,margin就很容易掌握了

margin: const EdgeInsets.all(15.0),

完整代码:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '这里是beline的app',
      home: Scaffold(
          appBar: AppBar(title: Text('这里是title')),
          body: Center(
            child: Container(
              child: new Text(
                'this is beline App',
                style: TextStyle(fontSize: 40.0),
              ),
              alignment: Alignment.topCenter,
              width: 375.0,
              height:350.0,
              color: Colors.lightBlue,
              padding: const EdgeInsets.fromLTRB(32.0, 100.0, 50.0, 10.0),
              margin: const EdgeInsets.all(15.0),
            )
          )),
    );
  }
}

decoration背景渐变色和边框

在使用decoration之前我们需要把前面使用到的color属性去掉,因为同时使用color和decoration属性会冲突导致编译器报错.

decoration: new BoxDecoration(
  gradient: const LinearGradient(
    colors: [Colors.lightBlue, Colors.green,Colors.deepOrange]
  )
),

上面的demo中,我们通过三个颜色,把Container的背景做成了横向渐变效果,同时使用vscode编译器可以在鼠标指向对应的颜色属性的时候,看到通过加[100]的方式显示颜色的深度

image.png

边框属性border也是需要在decoration对象下来设置的.分别传入边框宽度和颜色

decoration: new BoxDecoration(
  gradient: const LinearGradient(
    colors: [Colors.lightBlue, Colors.green,Colors.deepOrange]
  ),
  border:Border.all(width: 5.0, color: Colors.redAccent)
),

Flutter - Container组件