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