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<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  var account = '13800138000';

  var roles = 'Android';

  var addressInfo = 'xxx大厦';

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Scaffold(
            body: Column(
      children: <Widget>[
        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: <Widget>[
              Column(
                children: <Widget>[
                  // 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: <Widget>[
                      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: <Widget>[
                            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: <Widget>[
                GridView.extent(
                  // 7、禁止GridView的内部滚动
                  physics: NeverScrollableScrollPhysics(),
                  maxCrossAxisExtent: 180,
                  padding: EdgeInsets.all(30),
                  mainAxisSpacing: 30,
                  crossAxisSpacing: 30,
                  shrinkWrap: true,
                  children: <Widget>[
                    _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: <Widget>[
                      Divider(height: 2, color: Color(0xFFE9EBEE)),
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(top: 30, bottom: 30),
                        child: Row(
                          children: <Widget>[
                            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: <Widget>[
          Image(
            width: 36,
            height: 36,
            image: AssetImage(url),
          ),
          Padding(
            padding: EdgeInsets.only(top: 8),
          ),
          Text(
            title,
            style: TextStyle(fontSize: 16, color: Color(0xFF69798E)),
          )
        ],
      ),
    );
  }
}