Container容器元件的使用

xiaosong123發表於2019-06-28
AI元件

Container容器元件的使用

Container（容器控制元件）在Flutter是經常使用的控制元件，它就相當於我們HTML裡的div標籤，每個頁面或者說每個檢視都離不開它

Alignment屬性

  • bottomCenter:下部居中對齊。
  • botomLeft: 下部左對齊。
  • bottomRight：下部右對齊。
  • center：縱橫雙向居中對齊。
  • centerLeft：縱向居中橫向居左對齊。
  • centerRight：縱向居中橫向居右對齊。
  • topLeft：頂部左側對齊。
  • topCenter：頂部居中對齊。
  • topRight： 頂部居左對齊。

程式碼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}
複製程式碼

padding屬性

padding的屬性就是一個內邊距，它和你使用的前端技術CSS裡的padding表現形式一樣，指的是Container邊緣和child內容的距離。

padding簡易書寫方式

padding: const EdgeInsets.all(20),
複製程式碼

EdgeInsets.all(20)很多情況並不滿足我們的需求，所以：

padding: const EdgeInsets.fromLTRB(10,30,20,20),
複製程式碼

我們用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以滿足我們的需求，LTRB分別代表左、上、右、下

margin屬性

margin是外邊距，只的是container和外部元素的距離。
現在要把container的外邊距設定為10個單位，程式碼如下:

margin: const EdgeInsets.all(10.0),
複製程式碼

margin 同樣擁有自定義的能力：

margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0)
複製程式碼

decoration屬性

decoration是 container 的修飾器，主要的功能是設定背景和邊框。
比如你需要給背景加入一個漸變，這時候需要使用BoxDecoration這個類，程式碼如下（需要注意的是如果你設定了decoration，就不要再設定color屬性了，因為這樣會衝突）。

child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10,30,20,20),
            margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              )
            ),
          ),
複製程式碼

注意：一定要去掉color屬性

border 邊框

設定邊框可以在decoration裡設定border屬性，比如你現在要設定一個紅色邊框，寬度為5。程式碼如下：

child: Container(
            child: new Text('Hello LXS',style:TextStyle(fontSize:40.0),),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            padding: const EdgeInsets.fromLTRB(10,30,20,20),
            margin: const EdgeInsets.fromLTRB(10.0,30.0,10.0,10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            ),
          ),
複製程式碼

主要程式碼是:

border:Border.all(width:5.0,color:Colors.red)
複製程式碼

Image圖片元件的使用

在程式中圖片必不可少，接下來學習一下圖片的使用:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp (
      title: 'Text Widget',
      home: Scaffold(
        body:Center(
          child:Container(
            child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
               scale:1.0
            ),
            width:300.0,
            height:200.0,
            color:Colors.lightBlue
          ),
        ),
      ),
    );
  }
}
複製程式碼

加入圖片的幾種方式

  • Image.asset:載入資源圖片，就是載入專案資源目錄中的圖片,加入圖片後會增大打包的包體體積，用的是相對路徑。
  • Image.network:網路資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網路路徑地址。
  • Image.file:載入本地圖片，就是載入本地檔案中的圖片，這個是一個絕對路徑，跟包體無關。
  • Image.memory: 載入Uint8List資源圖片,這個我目前用的不是很多，所以沒什麼發言權。

fit屬性的設定

fit屬性可以控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的，我們先來看看這些屬性（建議此部分組好看視訊理解）。

  • BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
  • BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
  • BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
  • BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大。
child:Container(
            child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
               fit: BoxFit.fill,
            ),
            width:300.0,
            height:200.0,
            color:Colors.lightBlue
          ),
複製程式碼

圖片的混合模式

圖片混合模式（colorBlendMode）和color屬性配合使用，能讓圖片改變顏色，裡邊的模式非常的多，產生的效果也是非常豐富的。在這裡作幾個簡單的例子，讓大家看一下效果，剩下的留給小夥伴自己探索

child:new Image.network(
  'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
    width: 100,
    height: 100,
),
複製程式碼

color：是要混合的顏色，如果你只設定color是沒有意義的。 colorBlendMode:是混合模式，相當於我們如何混合。

repeat圖片重複

基本使用程式碼：

child: new Image.network(
              'https://img2.woyaogexing.com/2019/06/09/dd1cce5fd57e48e8911a8fc9e872979d!400x400.jpeg',
              repeat: ImageRepeat.repeatY,
              width: 100,
              height: 100,
            ),
複製程式碼
  • ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整個畫布
  • ImageRepeat.repeatX: 橫向重複，縱向不重複
  • ImageRepeat.repeatY：縱向重複，橫向不重複
  • ImageRepeat.noRepeat:單圖顯示，不重複

還有非常多炫酷的效果大家可以自己嘗試

ListView 列表元件簡介

列表元件的知識其實是很多的，也是一個經常使用的元件，這節我們先學習最簡單的列表元件如何製作。

話不多說線上程式碼，程式碼如下：

import 'package:flutter/material.dart';

void main () => runApp(MyApp());
///縱向列表
class MyApp extends StatelessWidget {
  @override 
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'LXS Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('listView Widget'),
        ),
        // body: new Text('ListView Widget'),
        body: new ListView(
          children: <Widget>[
          //  new ListTile (
          //    leading:new Icon(Icons.access_time),
          //    title: new Text('access_time')
          //  ),
          //  new ListTile (
          //    leading:new Icon(Icons.accessibility),
          //    title: new Text('accessibility')
          //  ), 
          //  new ListTile (
          //    leading:new Icon(Icons.add_a_photo),
          //    title: new Text('add_a_photo')
          //  ),  
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatX,
              // height:100.0,

            ),
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatY,
              //  height:200.0,
              ),
            new Image.network(
              'https://jspang.com/images/bilibili_count.jpg',
              fit: BoxFit.fitWidth,
              repeat: ImageRepeat.repeatY,
              // height:300.0,
              ),
          ],
        ),
        // backgroundColor: Colors.blue,
      ),
    );
  }
}
複製程式碼

製作橫向列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp (
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200.0,
            child: MyList(),
          ),
        ),
      ),
    );
  }
}

class MyList extends StatelessWidget {
  @override 
  Widget build (BuildContext context) {
    return ListView (
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}
複製程式碼

橫向列表和豎向列表最大的不同在於：
scrollDirection

  • Axis.vertical：預設值，豎向排列
  • Axis.horizontal：水平排列

其次MyList做了一個簡單地程式碼分離，程式碼可讀性更高

動態列表

動態列表顧名思義，資料不是寫死的也是我們在實際專案中常用的，比如我們的資料從後臺讀取過來，然後存入一個變數陣列裡，然後以陣列的內容迴圈出一個列表,先上程式碼在解釋：

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(1000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget {

  final List<String> items;

  MyApp({Key key,@required this.items}): super(key : key);

  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}
複製程式碼

首先我們先介紹資料的來源（當然我這的資料也是假的）:

void main() => runApp(MyApp(
  items:new List<String>.generate(1000, (i)=>"Item $i")
));
複製程式碼

List型別的使用:

  • var myList = List(): 非固定長度的宣告。
  • var myList = List(2): 固定長度的宣告。
  • var myList= List():固定型別的宣告方式。
  • var myList = [1,2,3]: 對List直接賦值。

我們使用的事List傳遞，然後直接用List方法中的generate產生List中的元素，最後產生一個帶值的List陣列

說明:再main函式的runApp中呼叫了MyApp類，再使用類的使用傳遞了一個items引數,並使用generate生成器對items進行賦值

generate方法傳遞兩個引數，第一個引數是生成的個數，第二個是方法

引數傳遞完成，接下來我們看看怎麼接收的：

接收引數

  ///final:只能被設一次值，在宣告處賦值，值和普通變數的設值一樣，可以是物件、字串、數字等，用於修飾值的表示式不變的變數  
  ///const：只能被設一次值，在宣告處賦值，且值必須為編譯時常量；用於修飾常量。
  final List<String> items;
  
  MyApp({Key key,@required this.items}): super(key : key);
複製程式碼

MyApp(...)是一個建構函式,除了Key，我們增加了一個必傳引數，這裡的@required意思就必傳。:super如果父類沒有無名無引數的預設建構函式，則子類必須手動呼叫一個父類建構函式。

我們就可以接收一個傳遞過來的引數了，當然我們要事先進行宣告

動態列表 ListView.builder()

 body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
複製程式碼

必填引數：

  • itemCount：列表行數
  • itemBuilder：內容繪製

當然還有很多可用引數：

  • scrollDirection：滾動方向
  • reverse:是否倒序

等等還有很多，等待大家使用，我這就不多介紹了

相關文章