Flutter設置背景圖片

前言

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

 

布局

1、創建路由子頁面

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

Scaffold

路由頁面的骨架，我們在里面可以拼裝出一個完整的路由頁面

appBar

創建導航欄

body

構建頁面主體結構

 

2、頁面布局

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

為了后續方便維護，在頁面布局時最好都拆分成不同的小模塊來分開寫，不然后期太難維護

Column

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

首先布局思路就是使用Column可以在垂直方向排列其子組件。

mainAxisAlignment

然后在把里面的子元素都按主軸方向對齊

 

3、背景設置

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容器組件來包裹

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 ... })

廣州VI設計公司https://www.houdianzi.com

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