Flutter基礎組件——Text，Container

走進Flutter

Flutter作爲目前最流行的跨平臺技術框架，正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。首先，讓我們瞭解一下Flutter插件。

Flutter是什麼？

Flutter是Google推出的一套開源跨平臺UI框架，是使用Dart語言開發的移動應用開發框架，可以快速地在Android、iOS和Web平臺上構建高質量的原生用戶界面。同時，Flutter還是Google新研發的Fuchsia操作系統的默認開發套件。Flutter是目前最火熱的前端技術之一。簡單來說，Flutter是一款移動應用程序SDK，包含框架、控件和一些工具，可以用一套代碼同時構建Android和iOS應用，並且性能可以達到原生應用一樣的性能。

Flutter框架結構

下圖是Flutter框架結構圖，對大部分開發者而言，最常用的是Widgets層，屏幕上可見與不可見的元素都由Widgets層實現。它有兩個現成的Widget庫——Material庫與Cupertino庫。

Flutter框架主要特性

1、快速開發

Flutter 的熱重載可以快捷方便的試驗、重構 UI和bug修復。在模擬器與Android 硬件上體驗亞秒級的重載，而不會丟失狀態。

2、跨平臺

Flutter至少可以跨5種平臺，甚至支持嵌入式開發。我們常用的有MacOS、Windows、Linux、Android、IOS，甚至可以在谷歌最新的操作系統Fuchsia上運行。

3、響應式框架

通過 Flutter 的Reactive框架和豐富的平臺佈局和基礎組件快速方便地構建用戶界面。用強大而靈活的 apis 解決 2D、動畫、手勢、效果等難題。

4、絢麗 UI

通過 Flutter 內建的漂亮的質感設計和 Cupertino、豐富的動畫 api和平臺感知，讓用戶對界面設計感到滿意。

認識Flutter基礎組件

Flutter裏有一個非常重要的核心理念：一切皆爲組件，Flutter所有的元素皆由組件組成。接下來讓我們來認識兩個基礎組件——Text，Container

Text主要參數詳解

屬性	說明
textAlign	文本水平方向對齊方式，取值有center、end、justify、left、right、start、values
textDirection	從左到右使用TextDirection.ltr，從右到左使用TextDirection.rtl
textScaleFactor	字體縮放係數，如：如果此屬性設置的值爲1.5，那麼字體會放大150%
textSpan	文本塊，TextSpan裏可以包含文本內容及樣式
data	要顯示的文本
maxLines	文本顯示的最大行數
style	文本樣式，可定義文本的字體大小、顏色、粗細等

TextStyle style

屬性	說明
TextDecoration decoration	繪製文本裝飾；下劃線（TextDecoration.underline）上劃線（TextDecoration.overline）刪除線（TextDecoration.lineThrough）無（TextDecoration.none）
Color decorationColor	繪製文本裝飾的顏色
FontStyle fontStyle	字體變體：FontStyle.italic 使用斜體FontStyle.normal 使用直立
double height	文本行與行的高度，作爲字體大小的倍數（取值1~2，如1.2）
Locale locale	此屬性很少設置，用於選擇區域特定字形的語言環境

構造方法1：用於創建一個單一格式的 Text
Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })
使用構造方法1，對上述屬性進行運用，示例如下：

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Paint backgroundPaint = new Paint();
    backgroundPaint.color = new Color(0xFFFFFFFF);
    List<Shadow> shadowList = new List();
    shadowList.add(new Shadow(
        //陰影顏色
        color: new Color(0xFFFF0000),
        //模糊程度
        blurRadius: 2.0));
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Text widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Text widget'),
        ),
        body: new Text(
          //單一格式文本框，第一個參數爲文本內容
          "我是一段測試文本Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!",
          //文字對齊方式，文本開始位置對齊，類似左對齊
          textAlign: TextAlign.start,
          //文字方向
          textDirection: TextDirection.ltr,
          //文字最多顯示行數
          maxLines: 3,
          //當文本內容超過最大行數時，剩餘內容的顯示方式，相當於Android 的 ellipsize 屬性
          overflow: TextOverflow.ellipsis,
          //文本樣式
          style: new TextStyle(
              //文字顏色，值爲一個 Color 對象
              color: new Color(0xFF000000),
              //添加裝飾物：下劃線
              decoration: TextDecoration.underline,
              //設置裝飾物的顏色，值爲一個 Color 對象
              decorationColor: new Color(0xFF00FFFF),
              //設置裝飾物的樣式，裝飾線爲虛線
              decorationStyle: TextDecorationStyle.dashed,
              //字體大小
              fontSize: 20.0,
              //字體樣式：斜體
              fontStyle: FontStyle.italic,
              //字體字重，常用值有 FontWeight.bold（加粗）
              fontWeight: FontWeight.bold,
              inherit: false,
              //字間距，值爲 double 類型
              letterSpacing: 2.0,
              //文字陰影，值爲一個 Shadow 集合
              shadows: shadowList,
              //文本基線：用於對齊字母字符的字形底部的水平線
              textBaseline: TextBaseline.ideographic,
              //字體間距
              wordSpacing: 10.0,
              //行高
              height: 2.0),
        ),
      ),
    );
  }
}

運行結果如下：

構造方法2：用於創建一個富文本的 Text
Text.rich(TextSpan textSpan, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })
使用構造方法2，對上述屬性進行運用，示例如下：

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Paint backgroundPaint = new Paint();
    backgroundPaint.color = new Color(0xFFFFFFFF);
    List<Shadow> shadowList = new List();
    shadowList.add(new Shadow(
        //陰影顏色
        color: new Color(0xFFFF0000),
        //模糊程度
        blurRadius: 2.0));
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Text widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Text widget'),
        ),
        body: new Text.rich(
          //富文本文本框構造方法，可以顯示多種樣式的text，第一個參數爲 TextSpan
          new TextSpan(
              text: "我是一段測試文本",
              //文字樣式，如果後面的子 TextSpan 沒有覆蓋該 TextStyle 中的屬性，則使用該 TextStyle 指定的樣式
              style: new TextStyle(
                  //文字顏色，整體的文字顏色，如果後面的子 TextSpan 沒有覆蓋該屬性，則使用該文字顏色
                  color: new Color(0xFF000000),
                  fontSize: 20.0,
                  decoration: TextDecoration.underline),
              //子TextSpan，可以指定多個
              children: <TextSpan>[
                new TextSpan(
                    text: "Hello",
                    style: new TextStyle(
                        color: new Color(0xFFFF0000),
                        fontSize: 30.0,
                        fontStyle: FontStyle.italic)),
                new TextSpan(
                    text: "World",
                    style: new TextStyle(
                        color: new Color(0xFFFFFF00),
                        fontSize: 40.0,
                        fontWeight: FontWeight.bold)),
              ]),
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
}

運行結果如下：

可以看到我們給Text設置的各種屬性基本都呈現出來了

認識Container

Container是一種常用的控件，由負責佈局、繪畫、定位和大小調整的幾個控件組成，具體來說，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件組成，而不是將Container子類化來產生自定義效果。

Container主要參數詳解

屬性	說明
padding	內邊距
margin	外邊距
decoration	裝飾 BoxDecoration類型
width	容器寬
height	容器高
constraints	應用於子元素的附加約束
child	容器子元素
color	背景色
topCenter	頂部居中對齊
topLeft	頂部左對齊
topRight	頂部右對齊
center	水平垂直居中對齊
centerLeft	垂直居中水平居左對齊
centerRight	垂直居中水平居右對齊
bottomCenter	底部居中對齊
bottomLeft	底部居左對齊
bottomRight	底部居右對齊

對上述屬性進行運用，示例如下：

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imgUrl =
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545122324077&di=1b5986ad937c81c41f4c135ea1a9a026&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Df719f9458f01a18bf0be1a4bab1f2b3e%2Fc2fdfc039245d688a8f2cdcdacc27d1ed31b24e2.jpg";
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Container",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Container"),
        ),
        body: new Container(
          //外邊距，值爲一個 EdgeInsets 對象
          margin: EdgeInsets.all(30.0),
          //內間距，值爲一個 EdgeInsets 對象
          padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0),
          //Alignment.topLeft：垂直靠頂部水平靠左對齊。
          //Alignment.topCenter：垂直靠頂部水平居中對齊。
          //Alignment.topRight：垂直靠頂部水平靠右對齊。
          //Alignment.centerLeft：垂直居中水平靠左對齊。
          //Alignment.center：垂直和水平居中都對齊。
          //Alignment.centerRight：垂直居中水平靠右對齊。
          //Alignment.bottomLeft：垂直靠底部水平靠左對齊。
          //Alignment.bottomCenter：垂直靠底部水平居中對齊。
          //Alignment.bottomRight：垂直靠底部水平靠右對齊。
          alignment: Alignment.centerLeft,
          //裝飾，背景邊框等，不能與color屬性同時設置，會被child覆蓋
          decoration: new BoxDecoration(
              color: new Color(0xFFFF0000),
              //背景邊框
              border: new Border.all(
                  color: new Color(0xFFFFFF00),
                  width: 5),
              //邊框圓角
              borderRadius: new BorderRadius.only(
                  topLeft: new Radius.circular(5.0),
                  topRight: new Radius.circular(10.0),
                  bottomLeft: new Radius.circular(15.0),
                  bottomRight: new Radius.circular(20.0)),
              //漸變效果，覆蓋color
              gradient: new LinearGradient(colors: [
                new Color(0xFFFFDEAD),
                new Color(0xFF98FB98),
                new Color(0xFF6495ED)
              ]),
              //陰影效果
              boxShadow: [new BoxShadow(color:Color(0xFFFF0000),blurRadius: 5.0)],
              //背景混合模式
              backgroundBlendMode: BlendMode.color,
          //約束
          constraints: new BoxConstraints(maxWidth: 300.0, maxHeight: 400.0),
          //形狀變換，在做動畫的時候會用到
          transform: new Matrix4.skewY(0.3),
          //子組件
          child: new Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: new TextStyle(color: new Color(0xFFFFFFFF), fontSize: 40.0),
          ),
        ),
      ),
    );
  }
}

運行結果如下：

可以看到我們給 Container 設置的各種屬性都呈現了出來，包括我們設置的邊框、圓角、漸變背景、矩陣變換等一系列讓其效果更豐富的屬性。

參考：谷歌官方文檔、谷歌官方flutter介紹
作者：顧一帆
原文：https://blog.csdn.net/GwuYiFan/article/details/106467814

Flutter基礎組件——Text，Container

走進Flutter

Flutter是什麼？

Flutter框架結構

Flutter框架主要特性

認識Flutter基礎組件

Text主要參數詳解

認識Container

Container主要參數詳解

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

druid數據源 xml配置

idea中使用git，push出現Empty repository問題

IDEA中maven導入jar包

本地項目通過Git Bash命令行形式提交到碼雲

IDEA使用自帶maven還是自行配置maven

A1098

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結