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 函数修饰,然后编译通过,参考第二张图

Flutter 组件介绍 & 基础知识_第1张图片
Flutter 组件介绍 & 基础知识_第2张图片

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);
  }

你可能感兴趣的:(Flutter,flutter,android)