Flutter 组件介绍 & 基础知识

1 AppBar

属性介绍

属性	说明
leading	在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
title	标题，通常显示为当前界面的标题文字，可以放组件
actions	通常使用 IconButton 来表示，可以放按钮组
bottom	通常放 tabBar，标题下面显示一个 Tab 导航栏
leading	在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	文字是否居中
elevation	设置为0去除阴影

写法

import 'package:flutter/material.dart';

class AppbarPage extends StatelessWidget {
  const AppbarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
          },  
        ),
        actions: [
          IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.search)
          ),
          IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.settings))
        ],
        backgroundColor: Colors.red,
      ),
    );
  }
}

Const

被该修饰符修饰过的组件,或参数不可变,如下图,我们把children,用const参数修饰过后,两处采用网络数据的位置,编译标红,编译不通过,第二处给weightList组件进行传值,也不可能进行传值,我们可以把是死数据的位置加上(可以不加)const 函数修饰,然后编译通过,参考第二张图

android去除状态栏的半透明阴影

在main入口的weight中加入如下代码,可以去除状态栏的半透明背景,代码如下

    if (Theme.of(context).platform == TargetPlatform.android) {
      // android 平台
      SystemUiOverlayStyle _style =
      const SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(_style);

完整的写法,写入位置

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // android 平台去除半透明状态栏
    if (Theme.of(context).platform == TargetPlatform.android) {
      // android 平台
      SystemUiOverlayStyle _style =
      const SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(_style);
    }
    return MaterialApp(
      title: 'Flutter Demo',

正则校验

///手机号验证
  static bool isChinaPhoneLegal(String str) {
    return RegExp(
            r"^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$")
        .hasMatch(str);
  }

  ///邮箱验证
  static bool isEmail(String str) {
    return RegExp(
        r"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")
        .hasMatch(str);
  }
///验证URL
  static bool isUrl(String value) {
    return RegExp(
        r"^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+")
      .hasMatch(value);
}

///验证身份证
  static bool isIdCard(String value) {
    return RegExp(
        r"\d{17}[\d|x]|\d{15}")
      .hasMatch(value);
}

///验证中文
  static bool isChinese(String value) {
    return RegExp(
       r"[\u4e00-\u9fa5]")
      .hasMatch(value);
}

  // 验证是否为纯字母
  static bool isLetter(String str) {
    final reg = RegExp(r"^[ZA-ZZa-z_]+$");
    return reg.hasMatch(str);
  }

  // 验证是否为数字
  static bool isNumber(String str) {
    final reg = RegExp(r"^[0-9_]+$");
    return reg.hasMatch(str);
  }

  //验证是否包含特殊字符
  static bool isHaveSpecialCharacters(String input) {
    final reg = new RegExp(r'[`~!@#$%^&*()_+=|;:(){}'',\\[\\].<>/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？-]');
    return reg.hasMatch(input);
  }