首页 > 其他分享 >flutter组件学习

flutter组件学习

时间:2024-07-10 12:30:32浏览次数:9  
标签:TextStyle Widget return Text 学习 Colors child 组件 flutter

List.generate-生成一个列表

import 'package:flutter/material.dart';

void main() {
  //根据索引生成一个列表
  List<Widget> bts=List.generate(10, (index) => ElevatedButton(onPressed: (){}, child: Text("第$index个按钮")));
  Column column=Column(children: [
    Text("按钮头部",style: TextStyle(fontSize: 30),),
    ...bts//解包
  ],);

  runApp(MaterialApp(home: Center(child: Scaffold(body: column,),),));
}

Isolate.run()-执行耗时的任务

可以使用Isolate来进行密集运算,降低UI的延迟。
async关键字依旧会占用主线程的CPU资源、还是使用了主线程的事件循环。Isolate会建立新的线程,可以充分发挥多核CPU的优势。
Isolate拥有独立的内存,主线程也是一个Isolate.Isolate彼此之间通过消息来传递信息。传递的对象会进行深拷贝,不可变对象除外。如果只是需要运行之后返回结果那么使用run方法就行,需要多次传递消息的话得进一步学习定制isolate,当然,也可以试试worker_manager插件。

  Isolate.run(() {
  print('i am isolate');
  return 1;
  }).then((rt) {
    print("the return is $rt");
  });

SegmentedButton-多选按钮

可以设置多选、单选、是否允许不选。


class _MyAppState extends State<MyApp> {
  Set<int> selected={3};
  void change(Set<int> slct){
    setState(() {
      selected=slct;
    });
  }
  @override
  Widget build(BuildContext context) {
  var w=  SegmentedButton<int>(
    onSelectionChanged:change ,
    selectedIcon: Icon(Icons.panorama_wide_angle_select),
    showSelectedIcon: false,
    emptySelectionAllowed: true,
    multiSelectionEnabled:true,segments: List.generate(10, (index) {
      return ButtonSegment(value: index,label: Text("选项-$index",style: TextStyle(fontSize: 30),));
    }), selected: selected,);
    return Scaffold(body: w,);
  }
}

DropdownMenu-在大量的选项中选择

可以设置搜索和过滤功能,适用于大量的选项


class _MyAppState extends State<MyApp> {
  Color selected=Colors.blue;
  void change(Color? slct){
    if(slct ==null)return;
    setState(() {
      selected=slct!;
    });
  }
  @override
  Widget build(BuildContext context) {
  Widget w=  DropdownMenu(
    label: Text("颜色",style: TextStyle(fontSize: 25),),
    textStyle: TextStyle(fontSize: 30),
    enableFilter: false,
      width: 500.0,
      onSelected:change ,
      enableSearch: true,
      helperText: "这是一段帮助文字",
      hintText: "这是一段提示文字",
      initialSelection: selected,
      dropdownMenuEntries: <DropdownMenuEntry<Color>>[
    DropdownMenuEntry(value: Colors.black, label: "black"),
    DropdownMenuEntry(value: Colors.green, label: "green"),
    DropdownMenuEntry(value: Colors.yellow, label: "yellow"),
    DropdownMenuEntry(value: Colors.blue, label: "blue"),
    DropdownMenuEntry(value: Colors.purple, label: "purple")
  ]);
  w=Center(child: w,);
    return Scaffold(body: w,backgroundColor: selected,);
  }
}

Opacity-控制子组件透明度的组件

AnimatedOpacity的duration含义是当使用setstate函数改变opacity的值时,组件的透明度会从原来的透明度在这个时间内缓慢向新的透明度变化。


class _MyAppState extends State<MyApp> {
 double opct=1.0;
 double anmt=1.0;
  @override
  Widget build(BuildContext context) {

  Widget w=  Opacity(opacity: opct,child: Text("我爱编程,$opct",style: TextStyle(fontSize: 30),),);
  w=Column(children: [w,AnimatedOpacity(opacity: anmt, duration: Duration(seconds: 3),child:
    Text("世界和平",style: TextStyle(fontSize: 40),),)],);
  w=Center(child: w,);
    return Scaffold(body: w,floatingActionButton: FloatingActionButton(child:Text("透明度$opct"),onPressed: (){
      setState(() {
        if(opct==0.0){
          opct=1;
        }
        else {
          opct-=0.1;
        }
        anmt=0;
      });
    },),);
  }
}

AnimatedContainer-动画型容器,动画改变容器的各个属性

包括常见的属性,高度宽度背景颜色啥的


class _MyAppState extends State<MyApp> {
double wid=600;
double h=600;
Color c=Colors.red;
  @override
  Widget build(BuildContext context) {

  Widget w=AnimatedContainer(duration: Duration(seconds: 3)
    ,width: wid
    ,height: h,
    color: c,child: Icon(Icons.ac_unit)
  ,);

  return Scaffold(body: Center(child: w,),floatingActionButton: FloatingActionButton(onPressed: (){
   setState(() {
     if(c==Colors.red){
       c=Colors.blue;
       wid=100;
       h=100;
     }
     else {
       wid=600;
       h=600;
       c=Colors.red;
     }
   });
  },),);

  }
}

Wrap-将子组件自动换行,可以横向或纵向

Expanded-尽可能占用最多的空间

SafeArea-避免内容被通知栏遮挡

FutureBuilder-加载数据的时候显示提示信息

FloatingActionButton-位置可以变化的底部按钮


class _MyAppState extends State<MyApp> {

  Future<String> loadData()async{
    await Future.delayed(Duration(seconds: 3));
    return "LOAD FINISHED" ;
  }
  late Future<String> ft;
  void initState(){
    super.initState();
    ft=loadData();
  }
  Color bkc=Colors.red;
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body: Center(child: FutureBuilder(future: ft, initialData:"LOADING",builder: (ct,snapshot){
        String rs="加载中";
        String?data=snapshot.data;
        if(snapshot.connectionState==ConnectionState.done){
          rs="加载已经完成";
          bkc=Colors.green;

        }
        return Text("State:{$rs}  data:{$data}",style: TextStyle(fontSize: 50,backgroundColor: bkc),);
      }),),
      bottomNavigationBar:BottomAppBar(color:Colors.yellow,child: Container(height: 50,),),
      floatingActionButton: FloatingActionButton(onPressed: (){},
    child: Icon(Icons.add),),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,);
  }
}

FadeTransition-淡入或者淡出的动画

通过设置begin和end的值可以实现淡入或者淡出。
需要使用SingleTickerProviderStateMixin类的一个实例。
通过controller.forward(from: 0.0)启动动画,根据需要设置from的值


class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
late AnimationController controller;
late Animation<double> animation;
  void initState(){

    controller=AnimationController(duration: Duration(seconds: 10),
        vsync: this);
    animation=Tween(begin: 0.0,end: 1.0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
  //controller.forward();
  return Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: (){

        controller.forward(from: 0.0);

    },),
    body: Center(child: FadeTransition(opacity: animation,
    child: Text("世界和平",style: TextStyle(fontSize: 100),),),),);
  }
}

标签:TextStyle,Widget,return,Text,学习,Colors,child,组件,flutter
From: https://www.cnblogs.com/panzewen/p/18293819

相关文章

  • 昇思25天学习打卡营第12天|ShuffleNet图像分类
    ShuffleNet网络介绍        ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型,和MobileNet,SqueezeNet等一样主要应用在移动端,所以模型的设计目标就是利用有限的计算资源来达到最好的模型精度。ShuffleNetV1的设计核心是引入了两种操作:PointwiseGroupConvolution......
  • 可视化学习:如何用WebGL绘制3D物体
    在之前的文章中,我们使用WebGL绘制了很多二维的图形和图像,在学习2D绘图的时候,我们提过很多次关于GPU的高效渲染,但是2D图形的绘制只展示了WebGL部分的能力,WebGL更强大的地方在于,它可以绘制各种3D图形,而3D图形能够极大地增强可视化的表现能力。相信很多小伙伴都对此有所耳闻,也有不少......
  • C语言学习笔记(04)——内存空间的使用
    指针指针概述:内存类型资源的地址、门牌号的代名词指针只是个概念,要用还得用指针变量:存放指针这个概念的盒子C语言编译器对指针这个特殊的概念,有2个疑问?1、分配一个盒子,盒子要多大?​ 在32bit系统中,指针就是4个字节,指针大小都固定了,就是4字节,跟你指向什么类型没有关系2、盒子......
  • JDBC学习记录3-数据库连接池
    JDBC学习记录3-数据库连接池以此记录自己的学习过程JDBC全称:JavaDataBaseConnectivityJDBC学习的是使用Java语言来操作关系型数据库的一套API。2024年7月10日11:13:04简单了解JDBC学习记录1-入门-CSDN博客JDBC学习记录2-API详解-CSDN博客四、数据库连接池和Drui......
  • Unity入门之重要组件和API(4) : Input
    前言Input类主要处理用户输入设备相关操作;输入设备包括鼠标、键盘、触屏、手柄、陀螺仪(重力感应)。1.鼠标1.1鼠标在屏幕的位置print(Input.mousePosition);1.2检测鼠标输入0-左键1-右键2-中键if(Input.GetMouseButtonDown(0)){ print("鼠标按下");}if(Input......
  • 深度学习第二课 Practical Aspect of Deep learning
    PracticalAspectofDeeplearningweek1深度学习的实用层面1.1训练/开发/测试集在机器学习发展的小数据量时代,常见做法是将所有数据三七分,就是人们常说的70%验证集,30%测试集,如果没有明确设置验证集,也可以按照60%训练,20%验证和20%测试集来划分。这是前几年机器学习领域普遍......
  • Docker 学习
    1DockerDocker是一个开源的应用容器引擎。Docker可以将应用程序及其依赖项打包到一个可移植的容器中,这个容器包含了应用程序的代码、运行环境、依赖库、配置文件等必须的资源。通过Docker可以实现快速部署并且隔离环境。无论部署的环境如何,Docker能保证容器中的应用程序都......
  • 【C语言】学习笔记:找出一个二维数组中的最大值,并打印出该最大值及其在数组中的位置
    找出一个二维数组中的最大值,并打印出该最大值及其在数组中的位置。首先,定义了必要的变量,包括用于遍历数组的索引变量i和j,以及用于存储最大值及其位置的变量hang、lie和max。定义了一个名为arry的二维数组,并初始化了其元素。使用两个嵌套的for循环来遍历数组,并......
  • uniapp 二次封装ui组件加class样式或修改样式在微信小程序不生效的情况
    原因:首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。微信小程序组件隔离文档参考组件样式隔离默认情况下,自定义组件的样式只受到自定义组件wxss的影响。除非以下两种情况:指定特殊的样式隔离选项 styleIsolation 。webvie......
  • 【机器学习】使用决策树分类器预测汽车安全性的研究与分析
    文章目录一、决策树算法简介决策树的结构分类和回归树(CART)决策树算法术语决策树算法直觉二、属性选择度量信息增益熵基尼指数计算分割基尼指数的步骤三、决策树算法中的过度拟合避免过度拟合的方法四、导入库和数据可视化探索性数据分析重命名列名查看数据集的总......