flutter widget組件之-----------樣式組件

flutter widget組件之-----------樣式組件

widget分爲兩類：widgets library中的標準widget和Material Components library中的專用widget;任何應用程序都可以使用widgets library中的widget，但只有Material應用程序可以使用Material Components庫。其中Card，ListTitle就是Material Components庫中的組件。

padding

一個widget, 會給其子widget添加指定的填充，padding會根據外層容器大小及 Padding的內邊距，自適應其子部件，

• 構造函數

 Padding({
    Key key,
    @required this.padding,//內邊距
    Widget child,// 子部件
  })

• 應用示例

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => new _MyApp();
}

class _MyApp extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('樣式。。。widget')
        ),
        body: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(border:Border.all(color: Colors.red) ),
          // padding會根據外層容器大小及 Padding的內邊距，自適應其子部件
          child: Padding(
            padding: EdgeInsets.all(10.0),//內邊距
            // 子部件
            child: Container(
              decoration: BoxDecoration(border:Border.all(color: Colors.red) ),
              child: Text('Hello World!')
            ),
          ),

        ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
      title: 'Flutter Demo',
      home: new MyApp()
  ));
}

Theme

將主題應用於子widget。主題描述了應用選擇的顏色和字體,

• 構造函數

Theme({
    Key key,
    @required this.data,// ThemeData數據
    this.isMaterialAppTheme = false,//若爲true,則組件出題有materialApp控制
    @required this.child,//子部件跟隨theme設置的樣式
})
factory ThemeData({
    Brightness brightness,//亮度
    MaterialColor primarySwatch,//用於導航欄、FloatingActionButton的背景色等
    Color primaryColor,// 原色
    Brightness primaryColorBrightness,//顏色亮度
    Color primaryColorLight,
    Color primaryColorDark,
    Color accentColor,
    Brightness accentColorBrightness,
    Color canvasColor,//canvas畫布顏色
    Color scaffoldBackgroundColor,//腳手架背景色主題
    Color bottomAppBarColor,//底部導航顏色主題
    Color cardColor,//card組件主題顏色
    Color dividerColor,//divider組件主題顏色
    Color highlightColor,
    Color splashColor,//波動主題顏色
    InteractiveInkFeatureFactory splashFactory,
    Color selectedRowColor,
    Color unselectedWidgetColor,
    Color disabledColor,
    Color buttonColor,
    ButtonThemeData buttonTheme,
    Color secondaryHeaderColor,
    Color textSelectionColor,
    Color cursorColor,
    Color textSelectionHandleColor,
    Color backgroundColor,
    Color dialogBackgroundColor,
    Color indicatorColor,
    Color hintColor,
    Color errorColor,
    Color toggleableActiveColor,
    String fontFamily,
    TextTheme textTheme,
    TextTheme primaryTextTheme,
    TextTheme accentTextTheme,
    InputDecorationTheme inputDecorationTheme,
    IconThemeData iconTheme,//用於Icon顏色
    IconThemeData primaryIconTheme,
    IconThemeData accentIconTheme,
    SliderThemeData sliderTheme,
    TabBarTheme tabBarTheme,
    ChipThemeData chipTheme,
    TargetPlatform platform,
    MaterialTapTargetSize materialTapTargetSize,
    PageTransitionsTheme pageTransitionsTheme,
    ColorScheme colorScheme,
    DialogTheme dialogTheme,
    Typography typography,
  })

• 應用示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: Colors.pink
      ),
      home: ThemeTestRoute(),
    );
  }
}
class ThemeTestRoute extends StatefulWidget {
  @override
  _ThemeTestRouteState createState() => new _ThemeTestRouteState();
}

class _ThemeTestRouteState extends State<ThemeTestRoute> {
  Color _themeColor = Colors.red; //當前路由主題色

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Theme(
      data: ThemeData(
          primarySwatch: _themeColor, //用於導航欄、FloatingActionButton的背景色等
          iconTheme: IconThemeData(color: _themeColor) //用於Icon顏色
      ),
      child: Scaffold(
        appBar: AppBar(title: Text("主題測試")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //第一行Icon使用主題中的iconTheme
            Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.favorite),
                  Icon(Icons.airport_shuttle),
                  Text("  顏色跟隨主題")
                ]
            ),
            //爲第二行Icon自定義顏色（固定爲黑色)
            Theme(
              data: themeData.copyWith(
                iconTheme: themeData.iconTheme.copyWith(
                    color: Colors.black
                ),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Icon(Icons.airport_shuttle),
                    Text("  顏色固定黑色")
                  ]
              ),
            ),
          ],
        ),

        floatingActionButton: FloatingActionButton(
            onPressed: () =>  //切換主題
                setState(() =>
                _themeColor =
                _themeColor == Colors.teal ? Colors.blue : Colors.teal
                ),
            child: Icon(Icons.palette)
        ),
      ),
      isMaterialAppTheme: true,
    );
  }
}

MediaQuery

MediaQuery建立一個子樹，在樹中媒體查詢解析不同的給定數據;
例如，要了解當前媒體的大小（例如，包含您的應用程序的窗口），您可以從MediaQuery.of：MediaQuery.of(context).size返回的ediaQueryData中讀取MediaQueryData.size屬性。
使用MediaQuery.of查詢當前媒體將導致您的窗口小部件在MediaQueryData更改時自動重建（例如，如果用戶旋轉其設備）。如果MediaQuery沒有在範圍內，則MediaQuery.of方法將拋出異常，除非將nullOk參數設置爲true，在這種情況下它返回null。

• 構造函數

MediaQuery({
    Key key,
    @required this.data,//
    @required Widget child,// 子組件不能爲空
})
// MediaQueryData: 關於一個媒體（例如，window）的信息。例如，MediaQueryData.size屬性包含當前窗口的寬度和高度。
MediaQueryData({
    this.size = Size.zero,
    this.devicePixelRatio = 1.0,
    this.textScaleFactor = 1.0,
    this.padding = EdgeInsets.zero,
    this.viewInsets = EdgeInsets.zero,
    this.alwaysUse24HourFormat = false,
    this.accessibleNavigation = false,
    this.invertColors = false,
    this.disableAnimations = false,
    this.boldText = false,
  })

• 應用示例

import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: Colors.pink
      ),
      home: ThemeTestRoute(),
    );
    // return WidgetsApp(
    //   color: Colors.red,
    //   home:   MediaQuery(
    //         data: MediaQueryData(
    //           size: Size(20, 50),
    //           textScaleFactor: 2
    //         ),
    //         child: Container(child: Text(".....data"),),
    //     ) ,
    //     builder: (BuildContext context, Widget child){
    //       return Text("fffffffffff");
    //     },
    // );
  }
}
class ThemeTestRoute extends StatefulWidget {
  @override
  _ThemeTestRouteState createState() => new _ThemeTestRouteState();
}

class _ThemeTestRouteState extends State<ThemeTestRoute> {

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(title: Text("mediaquery")),
        body: MediaQuery(
          data: MediaQueryData(
            size: Size(20, 50),
            devicePixelRatio: 5,//分辨率
            textScaleFactor: 2
          ),
          child: Container(child: Text("我是mediaquery"),),
        ),

    );
  }
}