[移动开发]flutter之组件

MaterialApp

表示一个应用了 Material 界面风格的应用程序，它封装了应用程序实现 Material Design 所需要的一些widget

MaterialApp(
  // 指定应用程序在任务栏上显示的标题
  title: 'Flutter初体验',
  // 指定应用程序的主界面
  home: Text('aaa'),
  // 配置应用程序的主题
  theme: ThemeData(primarySwatch: Colors.red),
)

Text
用于在页面上渲染普通文本字符串

Text('文本内容', style: TextStyle(fontSize: 12))

Scaffold
该组件是页面结构的脚手架，包含了页面的基本组成单元

• appBar - 头部导航条区域
• body - 页面主题内容区域
• drawer - 侧边栏抽屉区域
• bottomNavigationBar - 底部tabBar区域
• floatingActionButton - 右下角浮动按钮区域

Button

ElevatedButton(
	child: Text('PRESS'),
    onPressed:buttonPress,
),
TextButton( // FlatButton
   child: Text('PRESS AGAIN'),
   onPressed: buttonPress,
),
OutlinedButton(
   child: Text('Press this'),
   onPressed: buttonPress,
),
 ///----------------------------------
 void buttonPress() {
  print(
      'The button pressed, the value of text box is: ${myUserNameController.text} \n '
          'password is ${myUserPasswordController.text}');
}

Image

Image(
	image: AssetImage('images/100.jpg'),//本地图片，需要修改配置文件
),

///----------------------------------pubspec.yaml
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  ///----------------------------------
Image(
	image:NetworkImage('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
      	), //网络图
),

输入框

TextField(
	textAlign: TextAlign.left,   //左对齐
	decoration: InputDecoration(labelText: '用户名称',hintText: '用户名称不能为空'),
),

实例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

TextEditingController myUserNameController = TextEditingController();
TextEditingController myUserPasswordController = TextEditingController();

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

/// 组件/
class MyNewApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // 返回组件的状态，用来交互
    return MyNewAppState();
  }
}
/// 状态/
class MyNewAppState extends State<MyNewApp>{
  @override
  Widget build(BuildContext context) {
    debugPrint(">>> buildState...");
    return MaterialApp(
      title: 'This is title,will not display on Android phone',
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is made by Flutter with Dart'),
          elevation: 10.0,
          actions: <Widget>[
            IconButton(onPressed: buttonPress, icon: Icon(Icons.add_alert))
          ],
          leading: IconButton(
            onPressed: buttonPress,
            icon: Icon(Icons.arrow_back),
          ),
        ),
        body: Center(
          ///----------------------------------按钮
          // child: ElevatedButton(
          //   child: Text('PRESS'),
          //   onPressed:buttonPress,
          // ),
          ///----------------------------------按钮
          // child: TextButton( // FlatButton
          //   child: Text('PRESS AGAIN'),
          //   onPressed: buttonPress,
          // ),
          ///----------------------------------按钮
          // child: OutlinedButton(
          //   child: Text('Press this'),
          //   onPressed: buttonPress,
          // ),
          ///----------------------------------图片
          // child: Image(
          //   // image: AssetImage('images/100.jpg'),
          //    image: NetworkImage('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
          //    ),
          // ),
          ///----------------------------------输入框
          // child: TextField(
          //   textAlign: TextAlign.left,   //左对齐
          //   decoration: InputDecoration(labelText: '用户名称',hintText: '用户名称不能为空'),
          // ),
          ///----------------------------------
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: myUserNameController,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  labelText: '用户名称',
                  hintText: '用户名不能为空',
                ),
              ),
              TextField(
                obscureText: true,
                controller: myUserPasswordController,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: '密码',
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  ElevatedButton(
                    child: Text('登录'),
                    onPressed: buttonPress,
                  ),
                  TextButton(
                    child: Text('取消'),
                    onPressed: buttonPress,
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  ///状态的初始化
  @override
  void initState(){
    debugPrint(">>> initState...");
    super.initState();
  }

  /// 重构组件
  @override
  void didUpdateWidget(MyNewApp mna){
    debugPrint(">>> didUpdateWidget...");
    super.didUpdateWidget(mna);
  }

  ///组件为非活动状态
  @override void deactivate() {
    debugPrint(">>> deactivate");
    super.deactivate();
  }
  ///当组件被销毁
  @override
  void dispose(){
    super.dispose();
  }


}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'This is title,will not display on Android phone',
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is made by Flutter with Dart'),
          elevation: 10.0,
          actions: <Widget>[
            IconButton(onPressed: buttonPress, icon: Icon(Icons.add_alert))
          ],
          leading: IconButton(
            onPressed: buttonPress,
            icon: Icon(Icons.arrow_back),
          ),
        ),
        body: Center(
          ///----------------------------------
          // child: ElevatedButton(
          //   child: Text('PRESS'),
          //   onPressed:buttonPress,
          // ),
          ///----------------------------------
          // child: TextButton( // FlatButton
          //   child: Text('PRESS AGAIN'),
          //   onPressed: buttonPress,
          // ),
          ///----------------------------------
          // child: OutlinedButton(
          //   child: Text('Press this'),
          //   onPressed: buttonPress,
          // ),
          ///----------------------------------
          // child: Image(
          //   // image: AssetImage('images/100.jpg'),
          //    image: NetworkImage('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
          //    ),
          // ),
          ///----------------------------------
          // child: TextField(
          //   textAlign: TextAlign.left,
          //   decoration: InputDecoration(labelText: '用户名称',hintText: '用户名称不能为空'),
          // ),
          ///----------------------------------
          child: Column(
            children: <Widget>[
              TextField(
                controller: myUserNameController,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  labelText: '用户名称',
                  hintText: '用户名不能为空',
                ),
              ),
              TextField(
                obscureText: true,
                controller: myUserPasswordController,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: '密码',
                ),
              ),
              Row(
                children: <Widget>[
                  ElevatedButton(
                    child: Text('登录'),
                    onPressed: buttonPress,
                  ),
                  TextButton(
                    child: Text('取消'),
                    onPressed: buttonPress,
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

void buttonPress() {
  print(
      'The button pressed, the value of text box is: ${myUserNameController.text} \n '
          'password is ${myUserPasswordController.text}');
}