前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

代码结构

我们参照自定生成的代码去搭建一下学习基础组件的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mike Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class TestHomePage extends StatelessWidget{
  final String title;

  TestHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
           appBar: AppBar(
             title: Text(title),
           ),

           body: Text(
               'Test Text'
           )

    );
  }
}

Text

文本控件，用于文本展示

Text('Test Text', style: TextStyle(color: Colors.red,fontSize: 20))

text.png

RichText

富文本控件，文本控件一般满足大部分的文本显示需求，在一些复杂的场景比如文本有不同的样式，这种需要使用到富文本

RichText(
            text: TextSpan(children: [
          TextSpan(text: 'Mike', style: TextStyle(color: Colors.red)),
          TextSpan(text: 'Test', style: TextStyle(color: Colors.blue))
        ]))

RichText.png

也可以为其部分文本添加交互，这个和Android中的TextSpan大体用法相同

RichText(
            text: TextSpan(children: [
          TextSpan(text: '请勾选', style: TextStyle(color: Colors.black)),
          TextSpan(
              text: '<<协议>>',
              style: TextStyle(color: Colors.blue),
              recognizer: TapGestureRecognizer()..onTap = () {
                //打开协议
              })
        ]))

RichText.png

TextField

文本输入框组件，可以很轻松的得到漂亮的输入框效果

class TestHomePage extends StatefulWidget {
  final String title;
  TestHomePage({Key? key, required this.title}) : super(key: key);
  @override
  State createState()  => _TestHomePageState();
}

class _TestHomePageState extends State{
    var inputText = '';
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: TextField(
            onChanged: (data){
              setState(() {
                inputText = data;
              });
            },
            keyboardType: TextInputType.number,
            maxLength: 10,
            decoration: InputDecoration(
                icon: Icon(Icons.mail),//输入框左边的icon(外部)
                prefixIcon: Icon(Icons.person),//输入框左边的icon(内部)
                labelText: '信息',//提示信息
                labelStyle: TextStyle(color: Colors.red),//提示信息颜色
                helperText: '请输入您的信息',//帮助信息，在输入框下方显示
                helperStyle: TextStyle(color: Colors.blue),//帮助信息颜色
                hintText: '请输入信息',//显示在输入框的提示信息
                hintStyle: TextStyle(color: Colors.grey),//显示在输入框的提示信息颜色
                errorText: getErrorText(),//错误提示信息
                counterText: '${inputText.length}/10'//输入计数
            ),
          ));
    }

    getErrorText(){
      if(inputText == '123'){
        return null;
      } else {
        return '输入格式错误';
      }
    }
}

input.PNG

Button

Column(children: [
          ElevatedButton(onPressed: (){}, child: Text('Login')),
          TextButton(onPressed: (){}, child: Text('Login')),
          OutlinedButton (onPressed: (){}, child: Text('Login'))
        ],));

button.PNG

組选框

class _TestHomePageState extends State{

  var selectString = 'A';

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(children: [
          RadioListTile(value: 'A'  , groupValue: selectString, onChanged: (data){
           setState(() {
             selectString = data.toString();
           });
          },title: Text('A')),
          RadioListTile(value: 'B', groupValue: selectString, onChanged: (data){
            setState(() {
              selectString = data.toString();
            });
          },title: Text('B')),
          RadioListTile(value: 'C', groupValue: selectString, onChanged: (data){
            setState(() {
              selectString = data.toString();
            });
          },title: Text('C'))
        ],));

  }

}

radio.PNG

单选框

class _TestHomePageState extends State{
  
  bool? isAgree = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: CheckboxListTile(title: Text('Agree'),onChanged: (select){
          print(select);
          setState(() {
            isAgree = select;
          });
        },value: isAgree));

  }

}

checkbox.PNG

图片

在pubspec.yaml中设置本地资源路径，根目录新建assets/images/目录并放入图片

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:
     - assets/images/

加载本地以及网络图片

Column(children: [
          Image.network('https://upload-images.jianshu.io/upload_images/25609565-ceac3ee9fd154d41.png?imageMogr2/auto-orient/strip|imageView2/2/w/1020/format/webp'),
          Image.asset('assets/images/login.png')
        ],)

imgs.PNG

欢迎关注Mike的

Android 知识整理

Flutter-基础组件

前言