flutter学习——页面样式构建
页面构建：
1、如何给组件添加背景图片？
Container(
margin: EdgeInsets.only(top: 20),
// 1、constraints decoration配合使用给Container添加背景图片
constraints: BoxConstraints.expand(
height: 148,
),
decoration: BoxDecoration(
// 2、添加背景图片的圆角、border的圆角
// border: Border.all(width: 2.0),
// borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
image: DecorationImage(
image: AssetImage("images/bg1.png"), fit: BoxFit.fill)),
child: new Text("test"),
);AssetImage 组件中的图片url需要在yaml文件中声明
2、文案居左对齐
Align(
alignment: FractionalOffset.centerRight,
child: Container(
margin: EdgeInsets.only(top: 15, right: 15),
constraints: BoxConstraints.expand(height: 28, width: 66),
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(16)),
),
// 4、在container内居中
alignment: Alignment.center,
child: Text(
"Logout",
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
)边框 + 圆角 + 背景图 + 阴影
const BoxDecoration({
this.color, // 底色
this.image, // 图片
this.border, 边色
this.borderRadius, // 圆角度
this.boxShadow, // 阴影
this.gradient, // 渐变
this.backgroundBlendMode, // 混合Mode
this.shape = BoxShape.rectangle, // 形状
})示例：
// 设置组件大小
constraints: BoxConstraints.expand(
height: 100.0, width: 50.0),
// 设置组件边框+圆角
decoration: BoxDecoration(
border: Border.all(width: 1,color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(16)),
),Bug
A RenderFlex overflowed by Infinity pixels on the bottom.
出现这个提示的话那就是绘制的组件超过了界面的大小，可以用下面两个组件包裹解决问题：
1、
Expanded(
child: ,
)
参数解析：
flex:显示占比
child： 子元素
2、
SingleChildScrollView(
child: ,
)
参数解析：
key：当前元素的唯一标识符(类似于 Android 中的 id)
scrollDirection：滚动方向，默认是垂直
reverse：是否按照阅读方向相反的方向滑动。
padding：填充距离
primary：是否使用 widget 树中默认的 PrimaryScrollController 。当滑动方向为垂直方向（scrollDirection值为Axis.vertical）并且controller没有指定时，primary默认为true
physics：此属性接受一个ScrollPhysics对象，它决定可滚动Widget如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画；或者滑动到边界时，如何显示。默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，应用不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果，可以显式指定，Flutter SDK中包含了两个ScrollPhysics的子类可以直接使用： ClampingScrollPhysics→Android下微光效果 / BouncingScrollPhysics→iOS下弹性效果
controller：此属性接受一个ScrollController对象。ScrollController的主要作用是控制滚动位置和监听滚动事件
child：子元素实例代码：
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
State createState() {
return _HomePageState();
}
}
class _HomePageState extends State {
var account = '13800138000';
var roles = 'Android';
var addressInfo = 'xxx大厦';
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Column(
children: [
Container(
margin: EdgeInsets.only(top: 20),
// 1、constraints decoration配合使用给Container添加背景图片
constraints: BoxConstraints.expand(
height: 148,
),
decoration: BoxDecoration(
// 2、添加背景图片的圆角、border的圆角
// border: Border.all(width: 2.0),
// borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
image: DecorationImage(
image: AssetImage("images/bg1.png"), fit: BoxFit.fill)),
child: Column(
children: [
Column(
children: [
// 3、 Align居右
Align(
alignment: FractionalOffset.centerRight,
child: Container(
margin: EdgeInsets.only(top: 15, right: 15),
constraints: BoxConstraints.expand(height: 28, width: 66),
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(16)),
),
// 4、在container内居中
alignment: Alignment.center,
child: Text(
"Logout",
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
Row(
children: [
Container(
margin: EdgeInsets.only(left: 32),
child: Image(
width: 62,
height: 62,
// 5、添加asset图片，记得在yaml文件中添加链接
image: AssetImage("images/icon_header.png"),
),
),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
account,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
roles,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Container(
margin: EdgeInsets.only(top: 3),
child: Text(
addressInfo,
style: TextStyle(
fontSize: 14, color: Colors.white),
),
)
],
),
)
],
),
],
)
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
GridView.extent(
// 7、禁止GridView的内部滚动
physics: NeverScrollableScrollPhysics(),
maxCrossAxisExtent: 180,
padding: EdgeInsets.all(30),
mainAxisSpacing: 30,
crossAxisSpacing: 30,
shrinkWrap: true,
children: [
_HomePageEntryItem("images/icon_bd.png", "头条"),
_HomePageEntryItem("images/icon_bd.png", "视频"),
_HomePageEntryItem("images/icon_bd.png", "娱乐"),
_HomePageEntryItem("images/icon_bd.png", "体育"),
_HomePageEntryItem("images/icon_bd.png", "新时代"),
_HomePageEntryItem("images/icon_bd.png", "关注"),
],
),
Container(
margin: EdgeInsets.only(left: 30, right: 30),
child: Column(
children: [
Divider(height: 2, color: Color(0xFFE9EBEE)),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(top: 30, bottom: 30),
child: Row(
children: [
Expanded(
child: Text("MemoryClear",
style: TextStyle(
color: Color(0XFF2D2F3B), fontSize: 16)),
),
Image(
image: AssetImage("images/icon_arrow.png"),
width: 8,
height: 12,
)
],
),
)
],
),
)
],
),
),
)
],
)));
}
Widget _HomePageEntryItem(url, title) {
var itemWidth = 140.0;
var itemHeight = 96.0;
// 9、代码抽取、组件复用
return Container(
constraints: BoxConstraints.expand(height: itemHeight, width: itemWidth),
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(16)),
// 8、阴影位置由offset决定,阴影模糊层度由blurRadius大小决定（大就更透明更扩散），
// 阴影模糊大小由spreadRadius决定
boxShadow: [
BoxShadow(
color: Color(0x772D2F3B),
offset: Offset(0.0, 4.0),
blurRadius: 8.0,
spreadRadius: 1.0),
BoxShadow(color: Color(0xFFFFFFFF))
],
),
alignment: Alignment.center,
width: itemWidth,
height: itemHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
width: 36,
height: 36,
image: AssetImage(url),
),
Padding(
padding: EdgeInsets.only(top: 8),
),
Text(
title,
style: TextStyle(fontSize: 16, color: Color(0xFF69798E)),
)
],
),
);
}
}