此篇主要理解

• Container組件的作用
• 怎么使用Container
• Container中的布局方式
• 設(shè)置Container 的寬高以及背景色
• padding布局
• margin布局
• decoration背景漸變色
  在HTML中,盒子元素一直是非常重要的html標(biāo)簽.用于區(qū)塊的劃分.而在Flutter中Container組件則作為 div來使用,用于區(qū)域布局.
  那么我們在APP中間放置一個(gè)Container組件,里面再放置一個(gè)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是對準(zhǔn)的意思,顧名思義,用于Container組件內(nèi)部元素對齊使用,這里隨便畫了一張圖來展示具體的參數(shù)定位

無標(biāo)題的筆記本 (1)-2.jpg

也可以使用提供的對齊方式例如:

• center 居中對齊
• centerLeft 中間左對齊
• bottomCenter 下對齊 (如果在app中不設(shè)置Container的寬和高,那么Container的寬和高是等于父級的100%寬和100%高的)
• bottomLeft 下左對齊
• bottomRight 下右對齊
  還有一些沒有一一列出,但是我們可以從命名看出,除了center外,都是通過兩個(gè)方向來表達(dá)對齊方式,前一個(gè)單詞表示縱向軸,第二個(gè)單詞表示橫向軸,例如topRight,既為上方的右邊對齊方式

高和寬設(shè)置(height,width) 以及 背景色(color)

在Flutter中,高和寬的設(shè)置和css一樣,都是通過height和width進(jìn)行設(shè)置,只是設(shè)置的時(shí)候我們需要注意,使用的單位都需要是浮點(diǎn)類型,例如500.0
為了直觀看的出來我們的這個(gè)Container組件具體設(shè)置的大小,我們設(shè)置一個(gè)背景色方便辨認(rèn).color屬性,調(diào)用顏色組件colors設(shè)置即可

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,
         ),
        ),
      ),
    );
  }
}

這里需要注意,顏色組件中有一個(gè)容易忽視的地方,color: colors.linghtBlue colors組件是有s的,新學(xué)習(xí)的時(shí)候很容易寫掉.

image.png

padding布局

在CSS當(dāng)中,padding是一個(gè)非常常用的屬性,這里就不過多講解具體作用.只把用法進(jìn)行講解
在Container組件中,加入padding屬性,后面需要設(shè)置一個(gè)常量,例如:sonst EdgeInsets.all(10.0),就等于我們在css中的padding:10px來理解,上下左右,全部padding的值為10.
如果需要單獨(dú)設(shè)置4個(gè)方向的值,我們可以調(diào)用EdgeInsets.fromLTRB方法

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

margin布局

只要學(xué)會使用了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屬性去掉,因?yàn)橥瑫r(shí)使用color和decoration屬性會沖突導(dǎo)致編譯器報(bào)錯(cuò).

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

上面的demo中,我們通過三個(gè)顏色,把Container的背景做成了橫向漸變效果,同時(shí)使用vscode編譯器可以在鼠標(biāo)指向?qū)?yīng)的顏色屬性的時(shí)候,看到通過加[100]的方式顯示顏色的深度

image.png

邊框?qū)傩詁order也是需要在decoration對象下來設(shè)置的.分別傳入邊框?qū)挾群皖伾?/p>

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