flutter的組件使用

1.Container容器組件示例

        import 'package:flutter/material.dart';
        void main() => runApp(MyApp());
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: '容器組件示例',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('容器組件示例'),
                ),
                body: Center(
                  // 添加容器
                  child: Container(
                        width: 200.0,
                        height: 200.0,
                        // 添加邊框裝飾效果，設置了給圓弧加粗的邊框背景裏面一個text
                        decoration: BoxDecoration(
                          color: Colors.white,
                          // 設置上下左右四個邊框樣式
                          border: new Border.all(
                            color: Colors.grey, //邊框顏色
                            width: 8.0,           //邊框粗細
                          ),
                          borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
                                                  // 邊框的弧度
                        ),
                        child: Text(
                          'Flutter',
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 28.0),
                        ),
                      ),
                    ),
                  ),
                );
              }
          }

2.圖片組件

❑new Image：從ImageProvider獲取圖像。

❑new Image.asset：加載資源圖片。

❑new Image.file：加載本地圖片文件。

❑new Image.network：加載網絡圖片。

❑new Image.memory：加載Uint8List資源圖片。

    import 'package:flutter/material.dart';

    void main() {
      runApp(MaterialApp(
            title: 'Image demo',
            home: ImageDemo(),
          )
      );
    }
    class ImageDemo extends StatelessWidget {
      @override
            Widget build(BuildContext context) {
              // 居中展示
              return Center(
                // 添加網絡圖片
                child: Image.network(
                  // 圖片url
                  'https://flutter.io/images/flutter-mark-square-
      100.png',
                  // 填充模式
                  fit: BoxFit.fitWidth,
                ),
              );
            }
          }

3.文本組件這個組件內容很豐富

          import 'package:flutter/material.dart';
          /＊＊
            ＊ 展示不同的文本樣式
            ＊/
          class ContainerDemo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('文本組件'),
        ),
        // 垂直佈局
        body: Column(
          children: <Widget>[
            // 文本組件
            Text(
              '紅色字體+黑色刪除線+18號+斜體+粗體',
              // 文本樣式
              style: TextStyle(
                  // 字體顏色
                  color: const Color(0xffff0000),
                  // 文本裝飾器(刪除線)
                  decoration: TextDecoration.lineThrough,
                  // 文本裝飾器顏色(刪除線顏色)
                  decorationColor: const Color(0xff000000),
                  // 字體大小
                  fontSize: 18.0,
                  // 字體樣式：是否斜體
                  fontStyle: FontStyle.italic,
                  // 字體粗細
                  fontWeight: FontWeight.bold,
                  // 文字間距
                  letterSpacing: 2.0,
              ),
            ),
            Text(
              '橙色+下劃線+24號',
              style: TextStyle(
                  color: const Color(0xffff9900),
                  decoration: TextDecoration.underline,
                  fontSize: 24.0,
              ),
            ),
            Text(
              '上劃線+虛線+23號',
              style: TextStyle(
                  decoration: TextDecoration.overline,
                  decorationStyle: TextDecorationStyle.dashed,
                  fontSize: 23.0,
                  // 字體樣式
                  fontStyle: FontStyle.normal,
              ),
            ),
            Text(
              '23號+斜體+加粗+字間距6',
              style: TextStyle(
                  fontSize: 23.0,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 6.0,
              ),
                      ),
                    ],
                  ),
                );
              }
            }
            void main() {
              runApp(MaterialApp(
                title: 'Text demo',
                home: ContainerDemo(),
              ));
            }

4.按鈕圖標等於是安卓裏的圖片按鈕控件

        import 'package:flutter/material.dart';
        void main() => runApp(
          MaterialApp(
            title: '圖標按鈕組件示例',
            home: LayoutDemo(),
          ),
        );
        class LayoutDemo extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text('圖標按鈕組件示例'),
              ),
              body: Center(
                // 添加圖標按鈕
                child: IconButton(
                  // 圖標元素
                  icon: Icon(Icons.volume_up,size: 48.0,),
                  // 按鈕提示，點擊後會彈一個Toast的彈窗顯示提示
                  tooltip: '按下操作',
                  // 按下事件響應
                  onPressed:(){
                      print('按下操作');
                  },
                ),
              ),
            );
          }
        }

5.凸起按鈕組件對於是安卓裏的butten

        import 'package:flutter/material.dart';
        void main() => runApp(MyApp());
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'RaisedButton示例',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('RaisedButton組件示例'),
                ),
                body: Center(
                  // RaisedButton具有一種立體感
                  child: RaisedButton(
                      // 按下事件響應
                      onPressed: () {
                        // 按下事件處理
                      },
                      // 添加按鈕文本
                      child: Text('RaisedButton組件'),
                  ),
                ),
              ),
            );
          }
        }

6。ListView組件

        import 'package:flutter/material.dart';

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

        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {

            final title = "基礎列表示例";

            return MaterialApp(
              title: title,
              home: Scaffold(
                appBar: AppBar(
                  title: Text(title),
                ),
                // 添加基礎列表
                body: ListView(
                  // 添加靜態數據
                  children: <Widget>[
                      // ListTile是一種樣式相對固定的列表項，比如微信的“發現”頁面
                      ListTile(
                        // 添加圖標
                        leading: Icon(Icons.alarm),
                        // 添加文本
                        title: Text('Alarm'),
                      ),
                      ListTile(
                            leading: Icon(Icons.phone),
                            title: Text('Phone'),
                          ),
                          ListTile(
                            leading: Icon(Icons.airplay),
                            title: Text('Airplay'),
                          ),
                          ListTile(
                            leading: Icon(Icons.airplay),
                            title: Text('Airplay'),
                          ),
                          ListTile(
                            leading: Icon(Icons.airplay),
                            title: Text('Airplay'),
                          ),
                          ListTile(
                            leading: Icon(Icons.airplay),
                            title: Text('Airplay'),
                          ),
                          ListTile(
                            leading: Icon(Icons.alarm),
                            title: Text('Alarm'),
                          ),
                          ListTile(
                            leading: Icon(Icons.alarm),
                            title: Text('Alarm'),
                          ),
                          ListTile(
                            leading: Icon(Icons.alarm),
                            title: Text('Alarm'),
                          ),
                          ListTile(
                            leading: Icon(Icons.alarm),
                            title: Text('Alarm'),
                          ),
                          ListTile(
                            leading: Icon(Icons.alarm),
                            title: Text('Alarm'),
                          ),
                        ],
                      ),
                    ),
                  );
              }
            }

 

表單組件

        import 'package:flutter/material.dart';

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

        class LoginPage extends StatefulWidget {
          @override
          _LoginPageState createState() => _LoginPageState();
        }

        class _LoginPageState extends State<LoginPage> {
          // 全局Key用來獲取Form表單組件
          GlobalKey<FormState> loginKey = GlobalKey<FormState>();
    // 用戶名
    String userName;
    // 密碼
    String password;
    void login() {
      // 讀取當前的Form狀態類似初始化
      var loginForm = loginKey.currentState;
      // 驗證Form表單
      if (loginForm.validate()) {
        loginForm.save();
        print('userName:' + userName + ' password:' + password);
      }
    }

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Form表單示例'),
          ),
          body: Column(
            children: <Widget>[
              Container(
                  // 添加內邊距
                  padding: const EdgeInsets.all(16.0),
                  // 添加Form表單
                  child: Form(
                    key: loginKey,
                    child: Column(
                      children: <Widget>[
                        // 文本輸入框表單組件
                        TextFormField(
                          // 裝飾器
                          decoration: InputDecoration(
                            // 提示文本
                            labelText: '請輸入用戶名',
                          ),
                          // 接收輸入值
                          onSaved: (value) {
                            userName = value;
                          },
                          onFieldSubmitted: (value){},
                        ),
                        TextFormField(
                          decoration: InputDecoration(
                            labelText: '請輸入密碼',
                          ),
                          obscureText: true,
                          // 驗證表單方法
                          validator: (value) {
                            return value.length < 6 ? "密碼長度不夠6位" : null;
                          },
                          onSaved: (value) {
                              password = value;
                            },
                          ),
                        ],
                      ),
                    ),
                ),
                // 限定容器大小
                SizedBox(
                    width: 340.0,
                    height: 42.0,
                    // 添加登錄按鈕
                    child: RaisedButton(
                      onPressed: login,
                      child: Text(
                        '登錄',
                        style: TextStyle(
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                ),
              ],
            ),
          ),
        );
      }
    }