Flutter設置背景圖片

時間 2019-11-08

標籤 flutter 設置背景圖片简体版

原文原文鏈接

效果展現

前言

在咱們平時的開發中會常用到背景圖片，下面我這介紹的是Container經過BoxDecoration來設置的java

佈局

一、建立路由子頁面

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("優選訪客訂閱功能"),
      ),
      body: buildBody()
    );
  }

Scaffold

路由頁面的骨架，咱們在裏面能夠拼裝出一個完整的路由頁面app

appBar

建立導航欄ide

body

構建頁面主體結構佈局

二、頁面佈局

Widget buildBody() {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        buildHeader(),
        // Row(children: <Widget>[
        //   Text(
        //     '批量管理功能',
        //     style:TextStyle(
        //       fontSize: 16.0,
        //       color: Color.fromRGBO(234,200,134,1)
        //     )
        //   )
        // ],)
      ],
    );
  }

爲了後續方便維護，在頁面佈局時最好都拆分紅不一樣的小模塊來分開寫，否則後期太難維護ui

Column

即指沿水平或垂直方向排布子組件。Flutter中經過Row和Column來實現線性佈局;this

首先佈局思路就是使用Column能夠在垂直方向排列其子組件。spa

mainAxisAlignment

而後在把裏面的子元素都按主軸方向對齊code

三、背景設置

Widget buildHeader() {
    return new Container(
      height: 160.0,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/header.png"),
          fit: BoxFit.cover
        )
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // alignment: WrapAlignment.center,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // runSpacing: 9.0,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '批量管理功能',
                style:TextStyle(
                  fontSize: 16.0,
                  color: Color.fromRGBO(234,200,134,1)
                )
              )
            ],
          ),
          Wrap(
            runSpacing: 9.0,
            alignment: WrapAlignment.center,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${pageData['title']}',
                    style:TextStyle(
                      fontSize: 38.0,
                      color: Color.fromRGBO(234,200,134,1)
                    )
                  )
                ],
              ),
              //自定義圓角
              ClipRRect(
                borderRadius: BorderRadius.circular(12.5),
                child: Container(
                  height: 25.0,
                  width: 190.0,
                  color: Color.fromRGBO(234,200,134,1),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '${pageData['subTitle']}', 
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Color.fromRGBO(113,80,24,1)),
                      )
                    ]
                  )
                )
              )
            ],
          )
        ],
      ),
    );
  }

首先是把頭部banner部分放在一個方法裏面使用Container容器組件來包裹blog

Container

容器組件圖片

MediaQuery.of(context).size 獲取屏幕的大小

設置容器大小：

height: 160.0, //高度自定義
width: MediaQuery.of(context).size.width, //寬度設置和屏幕等寬

decoration

decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("images/header.png"),
      fit: BoxFit.cover
    )
  ),

Container組件的一個屬性，用來裝飾背景的；

咱們一般會直接使用BoxDecoration類，它是一個Decoration的子類，實現了經常使用的裝飾元素的繪製。

BoxDecoration({
  Color color, //顏色
  DecorationImage image,//圖片
  BoxBorder border, //邊框
  BorderRadiusGeometry borderRadius, //圓角
  List<BoxShadow> boxShadow, //陰影,能夠指定多個
  Gradient gradient, //漸變
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形狀
})

使用DecorationImage方法來裝載圖片

image: DecorationImage(
  image: AssetImage("images/header.png"), //加載本地圖片
  fit: BoxFit.cover //圖片伸縮方式
)

image圖片配置

在pubspec.yaml中的flutter部分添加以下內容：

assets:
    - images/header.png

Wrap流式佈局

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,
  this.runAlignment = WrapAlignment.start,
  this.runSpacing = 0.0,
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})

spacing：主軸方向子widget的間距
runSpacing：縱軸方向的間距
runAlignment：縱軸方向的對齊方式

ClipRRect

將子組件剪裁爲圓角矩形

ClipRRect({ 
     ...
     BorderRadius borderRadius, 
     CustomClipper<RRect> clipper, 
     Clip clipBehavior = Clip.antiAlias, 
     Widget child
     ...
 })

完整demo

import 'package:flutter/material.dart';

const pageData = {
    "discountStatus": 2, 
    "subscribeStatus": "0", 
    "title": "限時免費", 
    "subTitle": "活動時間9月1日-9月30日", 
    "packageList": [
        {
            "id": 23, 
            "desc": "月度訂閱", 
            "dealPrice": 10, 
            "originPrice": 50, 
            "recommand": 1
        }, 
        {
            "id": 33, 
            "desc": "半年訂閱", 
            "dealPrice": 56, 
            "originPrice": 280, 
            "recommand": 0
        }, 
        {
            "id": 56, 
            "desc": "年度訂閱", 
            "dealPrice": 108, 
            "originPrice": 540, 
            "recommand": 0
        }
    ]
};
class BatchSub extends StatefulWidget {
  @override
  createState() => new BatchSubState();
  
}

class BatchSubState extends State<BatchSub> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("優選訪客訂閱功能"),
      ),
      body: buildBody()
    );
  }
  Widget buildBody() {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        buildHeader(),
        // Row(children: <Widget>[
        //   Text(
        //     '批量管理功能',
        //     style:TextStyle(
        //       fontSize: 16.0,
        //       color: Color.fromRGBO(234,200,134,1)
        //     )
        //   )
        // ],)
      ],
    );
  }
  Widget buildHeader() {
    return new Container(
      height: 160.0,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/header.png"),
          fit: BoxFit.cover
        )
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // alignment: WrapAlignment.center,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // runSpacing: 9.0,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '批量管理功能',
                style:TextStyle(
                  fontSize: 16.0,
                  color: Color.fromRGBO(234,200,134,1)
                )
              )
            ],
          ),
          Wrap(
            runSpacing: 9.0,
            alignment: WrapAlignment.center,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${pageData['title']}',
                    style:TextStyle(
                      fontSize: 38.0,
                      color: Color.fromRGBO(234,200,134,1)
                    )
                  )
                ],
              ),
              //自定義圓角
              ClipRRect(
                borderRadius: BorderRadius.circular(12.5),
                child: Container(
                  height: 25.0,
                  width: 190.0,
                  color: Color.fromRGBO(234,200,134,1),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '${pageData['subTitle']}', 
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Color.fromRGBO(113,80,24,1)),
                      )
                    ]
                  )
                )
              )
            ],
          )
        ],
      ),
    );
  }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。