Flutter05-基础Widget

已于 2022-05-19 20:42:05 修改
阅读量537 收藏
点赞数
分类专栏： Flutter 文章标签： flutter android android studio
于 2022-05-10 23:45:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580612/article/details/124334728
版权

基础Widget

共用代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('title'),),
        body: HomeBody(),
      );
  }
}

一.Text

  1. 普通文本 normalText
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text(
      '《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
      textAlign: TextAlign.center,
      maxLines: 3,
      overflow: TextOverflow.ellipsis,//超出部分显示“……”
      style: TextStyle(
        fontSize: 25,
        color: Colors.purple
      ),
    );
  }
}
  1. 富文本 richText
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(text:'《定风波》 苏轼', ),
          TextSpan(text: '莫听穿林打叶声，何妨吟啸且徐行。'),
          TextSpan(text: '竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。')
        ]
      ),
      textAlign: TextAlign.center,
      style: TextStyle(color: Colors.green, fontSize: 15),
    );
  }
}

二.Button

  • ElevatedButton 带背景色按钮
  • TextButton 无背景色按钮
  • OutlinedButton 带边框按钮
  • IconButton
  • FloatingActionButton 浮动按钮
  • ButtonBar 按钮组
  1. 创建基础视图
/**
 ElevatedButton
 TextButton
 OutlinedButton
 IconButton
 FloatingActionButton
*/
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
                
        ElevatedButton(
          onPressed: (){
            print('ElevatedButton');
          }, 
          style: ButtonStyle(
            backgroundColor:MaterialStateProperty.all(Colors.green),
            // shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(10.0)),
          ),
          child: Text('ElevatedButton')
        ),

        TextButton(
          onPressed: (){
            print('TextButton');
          },
          child: Text('TextButton')
        ),

        OutlinedButton(
          onPressed: (){
            print('OutlinedButton');
          }, 
          child: Text('OutlinedButton')
        ),

        IconButton(
          onPressed: (){

          }, 
          icon: Icon(Icons.add)
        ),

        FloatingActionButton(
          onPressed: (){
            print('FloatingBtn');
          },
          child: Text('FloatingBtn'),
        ),

      ],
    );
  }
}

在这里插入图片描述

  1. 升级视图

/**
 ElevatedButton  带背景色按钮
 TextButton  无背景色按钮
 OutlinedButton  带边框按钮
 IconButton  
 FloatingActionButton  浮动按钮
 ButtonBar  按钮组
*/
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
                
        ElevatedButton(
          onPressed: (){
            print('ElevatedButton代替旧版RaisedButton');
          }, 
          style: ButtonStyle(
            backgroundColor:MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.pressed)) {
                return Colors.green;
              } else {
                return Colors.yellow;
              }
            }),
            foregroundColor: MaterialStateProperty.all(Colors.blueGrey),
            // shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(10.0)),
          ),
          child: Text('ElevatedButton')
        ),
        ElevatedButton.icon(
          onPressed: (){}, 
          icon: Icon(Icons.delete), 
          label: Text('Icon_ElevatedButton')
        ),

        TextButton(
          onPressed: (){
            print('TextButton代替旧版FlatButton');
          },
          child: Text('TextButton')
        ),

        OutlinedButton(
          onPressed: (){
            print('OutlinedButton');
          }, 
          child: Text('OutlinedButton'),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.grey),
            //圆角
            shape: MaterialStateProperty.all(
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))
            ),
            //边框
            side: MaterialStateProperty.all(
              BorderSide(width: 5, color: Colors.red)
            ),
          ),
        ),

        IconButton(
          onPressed: (){

          }, 
          icon: Icon(Icons.add)
        ),

        FloatingActionButton(
          onPressed: (){
            print('FloatingBtn');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.green,
          foregroundColor: Colors.yellow,
          //阴影偏移量
          elevation: 5,
          tooltip: 'tooltip',
          mini: false,
        ),

        ButtonBar(
          children: [
            IconButton(onPressed: (){}, icon: Icon(Icons.arrow_back)),
            IconButton(onPressed: (){}, icon:Icon(Icons.add)),
            IconButton(onPressed: (){}, icon: Icon(Icons.next_plan))
          ],
        )

      ],
    );
  }
}

在这里插入图片描述

三.Image

  1. 基础
/**
 image 
 NetworkImage 加载网络图片
 AssetImage 加载本地图片
*/
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return 
    Column(
      children: [
        Image(
          image: NetworkImage('https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
          width: 200,
          height: 200,
          fit: BoxFit.fitWidth,
          // alignment: Alignment.bottomCenter,
          //-1  ->  1
          // alignment: Alignment(-1, -1),
          repeat: ImageRepeat.repeatY,
        ),

        Image(
          image: AssetImage('images/iconSun.png'),
          width: 200,
          height: 200,
        )
      ],
    );
  }
}

在这里插入图片描述

  • 带占位图image
FadeInImage(
          placeholder: AssetImage('images/iconSun.png'), 
          image:  NetworkImage('https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
          fadeInDuration: Duration(seconds: 3),
          fadeOutDuration: Duration(seconds: 2),
        )
  • icon 字体图标
    Icon(Icons.arrow_left, size: 300, color: Colors.green,);
  1. 圆角头像
  • CircleAvatar
  • ClipOval
  • Container+BoxDecoration
  1. 圆角图片
  • ClipRRect
  • Container+BoxDecoration

四.Textfield

  1. textfield
class HomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFiledDemo()
        ],
      ),

    );

  }
}


class TextFiledDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TextFiledState();
  }
  
}

class TextFiledState extends State<TextFiledDemo> {

  final textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    textEditingController.text = 'Hello World';

    textEditingController.addListener(() {
      print('textEditingController---${textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Column(
        children: [
          TextField(
            controller: textEditingController,
            decoration: InputDecoration(
              icon: Icon(Icons.people),
              labelText: 'username',
              hintText: '请输入用户名',
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.lightGreen
            ),
            onChanged: (value) => print('onChanged $value'),
            onSubmitted: (value) => print('onSubmitted $value'),
            
          ),
          SizedBox(height: 10,),
          TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.security),
              labelText: 'password',
              hintText: '请输入密码',
              border: UnderlineInputBorder(),
              filled: true,
            ),
            onChanged: (value) => print('onChanged $value'),
            onSubmitted: (value) => print('onSubmitted $value'),
            
          ),
        ],
    );

  }

}

请添加图片描述

  1. TextFormField
class TextFiledState extends State<TextFiledDemo> {

  final registerKey = GlobalKey<FormState>();
  late String userName, password;

  pressedSaveBtnAction (){
    registerKey.currentState!.save();

    print('${this.userName},${this.password}');
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerKey,

      child: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            decoration: InputDecoration(
              icon: Icon(Icons.people),
              labelText: 'name'
            ),
            onSaved: (newValue) {
              this.userName = newValue!;
            },
          ),

          TextFormField(
            decoration: InputDecoration(
              icon: Icon(Icons.password),
              labelText: 'password'
            ),
            onSaved: (newValue) {
              this.password = newValue!;
            },
          ),

          SizedBox(height: 60),

          Container(
            width: 300,
            height: 40,

            child: ElevatedButton(onPressed: (){
              pressedSaveBtnAction();
            }, 
            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.green)),
            child: Text('Button')),
          ),

        ],
      )
    );
  }
}

//flutter: 1234,66666666

在这里插入图片描述

五. 组件Widget

基础代码


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('title'),),
        body: HomeBody(),
      );
  }
}
  1. algin center
 //algin center 
 class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.pets, size: 50, color: Colors.red,),
      // alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}
  1. Padding
 //Padding 
 class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(30),
      child: Text(
        '莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。', 
        style: TextStyle(
          color: Colors.red,
          fontSize: 18
        ),
      )
    );
  }
}
  1. container
 //container 
 class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
      // alignment: Alignment.bottomRight,
        width: 200,
        height: 200,
        color: Colors.grey[300],
        child: Icon(Icons.pets, size: 50, color: Colors.red,),
      )
    );
  }
}
  1. 阴影圆角图片
 //decoration borderRadius boxShadow gradient
class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),

          //阴影
          boxShadow: [
            BoxShadow(
              offset: Offset(5, 5),
              color: Colors.purple,
              blurRadius: 5
            )
          ],

          image: DecorationImage(
            // image: AssetImage('images/iconSun.png')
            image: NetworkImage('https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg')
          )

        ),
      ),
    );

/**
    // 渐变阴影圆角图片
    return Center(
      child: Container(
      // alignment: Alignment.bottomRight,
        width: 200,
        height: 200,
        child: Icon(Icons.pets, size: 50, color: Colors.white,),
        // color: Colors.grey[300],

        //装饰
        decoration: BoxDecoration(
          color: Colors.amber,
          border: Border.all(
            color: Colors.redAccent,
            width: 3,
            style: BorderStyle.solid
          ),

          //圆角
          borderRadius: BorderRadius.circular(20),

          //阴影
          boxShadow: [
            BoxShadow(
              offset: Offset(5, 5),
              color: Colors.purple,
              blurRadius: 5
            )
          ],

          //坡度，颜色渐变
          gradient: LinearGradient(
            colors: [
              Colors.green,
              Colors.red
            ]
          )
        ),

      )
    );

*/

  }
}
  1. Row 横排视图
 //Row 横排  Expanded设置弹性系数flex
class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,//最大宽度分布
      children: [
        Container(color: Colors.red, width: 60, height: 60),
        Container(color: Colors.blue, width: 80, height: 80),
        Expanded(
          child: Container(color: Colors.green, width: 90, height: 90),
          flex: 1,
        ),
        Expanded(
          child: Container(color: Colors.yellow, width: 70, height: 70),
          flex: 1,//弹性系数
        )
      ],
    );
  }
}
  1. Column 纵排视图
 //Column 纵排  Expanded设置弹性系数flex
class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,//最大宽度分布
      children: [
        Container(color: Colors.red, width: 60, height: 60),
        Container(color: Colors.blue, width: 80, height: 80),
        Expanded(
          child: Container(color: Colors.green, width: 90, height: 90),
          flex: 1,
        ),
        Expanded(
          child: Container(color: Colors.yellow, width: 70, height: 70),
          flex: 1,//弹性系数
        )
      ],
    );
  }
}
  1. stack 叠加视图
 //stack 叠加视图 stack常与Positioned一起使用，用来决定组件在Stack中的位置
class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.purple,
          width: 300,
          height: 300,
        ),
        Positioned(
          child: Icon(Icons.favorite, size: 50, color: Colors.white,),
          width: 30,
          height: 30,
          top: 30,
          left: 30,
        ),
        Positioned(
          child: Text('hello', style: TextStyle(color: Colors.white, fontSize: 20),), 
          bottom: 30,
          right: 30,
        )
      ],
    );
  }
}

在这里插入图片描述

六.滚动Widget

weixin_42580612
关注
专栏目录
Flutter学习-基础Widget
yong_19930826的博客
07-16 826
Flutter学习-基础Widget1. Flutter编程范式1.1 编程范式的理解1.2 flutter的编程范式2. 文本Widget2.1 普通文本展示 1. Flutter编程范式 这个章节又讲解一些理论的东西，可能并不会直接讲授Flutter的知识，但是会对你以后写任何的代码，都具备一些简单的知道思想； 1.1 编程范式的理解 编程范式对于初学编程的人来说是一个虚无缥缈的东西，但是却是我们日常开发中都在默认遵循的一些模式和方法； 比如我们最为熟悉的 面向对象编程就是一种编程范式，与之对应或者
Flutter---Widget介绍
nano-11的专栏
11-01 1471
Flutter里又一个非常重要的核心理念: 一切皆为组件, Flutter所有的元素皆由组件组成。比如: 一个布局元素，一个动画，一个装饰效果等。 Widget使用地址：https://github.com/nanos-11/Flutter_nan 一、根组件Widget 简介：Widget是所有组件的基类 所有组件都继承自它 要想自定义组件必须继承下边两个类中的其中一个： 1️⃣ StatelessWidget：无状态组件，状态不可变。 2️⃣ StatefulWidget：有状态组件，持有的状态可能在w
Flutter - 基础Widget
2401_84132449的博客
04-09 814
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！[外链图片转存中…(img-UeKfwjj2-1712614846326)]
Flutter课程(5)：Flutter页面-基础Widget
yzpbright的博客
04-11 287
Flutter页面-基础Widget 文章目录Flutter页面-基础WidgetWidgetStateless WidgetStateful WidgetState生命周期基础widget文本显示TextRichTextDefaultTextStyle图片显示FlutterLogoIconImageIamge.assetImage.fileImage.networkImage.memoryCircleAvatarFadeInImage按钮RaisedButtonFlatButtonOutlineButto
【Flutter -- 基础组件】Widget 简介
Kevin Learn Android
07-18 835
上一篇，学习了 Dart 语法，对 Dart 的语法和特性有了更深一步的了解。今天，来学习 Flutter 的基础控件，身为 Android 开发者都知道，一开始入坑 Android 就要熟悉学习其控件，如：TextView，ImageView，Button，ListView，RecycleView 等。为什么要学习呢？因为平时的开发都离不开这些控件，UI 的呈现都是有这些控件组成的，因此，其重要性就不用说了。对于 Flutter 来讲，基础控件(widget)就更加重要了。Flutter 和 Androi
Flutter-Widget组件
MIILN的博客
07-24 1627
记录flutter中的一些实用组件，持续更新
Flutter基础 -- Flutter基础特性
原来45的博客
06-04 1015
widget devTools 布局约束规则 松约束 紧约束 无边界unbounded 有状态无状态组件 生命周期
Flutter学习-多子布局Widget
yong_19930826的博客
07-18 546
Flutter学习-多子布局Widget
flutter学习-day5-认识widget
鹏多多的博客
12-07 964
widget的功能是描述一个UI元素的配置信息。它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector
Flutter-基础Widget
喂_balabala
07-29 1280
​ 在Flutter中，几乎所有的对象都是一个Widget，与原生开发中的不同的是，Flutter中的widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的widget、用于应用主题数据传递的Theme等等。由于Flutter主要就是用于构建用户界面的，所以，在大多数时候，可以认为widget就是一个控件，不必纠结于概念。
flutter-windows-3.16.9-stable.zip
01-27
2. 在`lib`目录下编写业务逻辑和UI界面，Flutter采用Widget（组件）为基础的构建方式，提供了丰富的预定义组件，如Container、Text、Button等，同时也支持自定义组件。 3. 使用热重载（Hot Reload）功能快速预览和...
【Flutter】使用 Flutter-Widget-From-Html 实现富文本渲染 解决跨平台的 HTML 显示问题
Code Metaverse
08-07 3110
在现代移动开发中，HTML 的重要性不言而喻。HTML 不仅是 Web 开发的基础，还在移动开发中占据重要地位。Flutter 作为一款优秀的跨平台开发框架，凭借其强大的性能和灵活的自定义能力，受到了开发者的广泛欢迎。那么，如何在 Flutter 中优雅地处理 HTML 呢？答案就是使用 Flutter-Widget-From-Html。
Flutter学习 -widget
W_LIN的博客
09-30 665
flutter widget
Flutter - 基础Widget，android简单小项目实例
m0_64604311的博客
12-07 512
child: Row( mainAxisSize: MainAxisSize.min, // 默认是max，占满父Widget；min是包裹内容 children: [ Icon(Icons.favorite, color: Colors.red), // 图标 Text(“喜欢作者”), // 文字 ], ), onPressed: () => print(“自定义Button”), // onPressed必传，否则样式可能会出问题 ) ], ); } } 2、定制 Button 默认间隔 :
深入理解 Flutter 鸿蒙版的 Stack 布局：适配屏幕与层叠样式布局
小淼淼的博客
10-16 2888
在 Flutter 中，布局是构建用户界面的基础。今天，我们将重点探讨 Flutter 的Stack布局，了解如何使用它创建复杂的界面元素，并实现响应式设计，以适应不同屏幕大小的设备。Stack是 Flutter 中的一种布局组件，允许你将多个子组件层叠在一起。通过使用Stack，你可以在同一个区域内显示多个控件，而每个控件的层叠顺序由添加顺序决定。Stack布局在实现重叠效果、绝对定位和复杂视图时非常有用。Stack布局是 Flutter 中非常强大的工具，能够实现各种复杂的层叠效果。通过结合。
【Flutter】Dart：类
最新发布
2303_80346267的博客
10-16 570
在 Dart 中，**类**（Class）是面向对象编程的核心概念之一，提供了一种封装数据和功能的方式。理解 Dart 中的类以及它的相关特性是开发 Flutter 应用的基础。本教程将深入介绍 Dart 中类的定义、属性、构造函数、方法、接口、Mixin 以及枚举类，帮助你在 Flutter 应用开发中高效使用类。
【Flutter】Dart：函数
2303_80346267的博客
10-16 730
在 Dart 中，函数是非常重要的组成部分，它不仅仅是一个逻辑片段，还可以作为对象进行传递和操作。Dart 提供了丰富的函数定义方式，包括常规函数、可选参数、匿名函数、回调函数等多种功能。本篇教程将深入介绍 Dart 中函数的定义与使用，帮助你灵活掌握各种场景下的函数编程技巧。
基于SpringBoot+Vue+Uniapp汽车保养系统小程序的设计与实现
源码好优多
10-10 1174
可行性分析是每开发一个项目必不可少的一部分，可行性分析可以直接影响一个系统的存活问题，针对开发意义进行分析，还有就是是否可以通过所开发的系统来弥补传统手工统计模式的不足，是否能够更好的解决阿博图书馆管理系统存在的问题等，通过对该阿博图书馆管理系统的开发设计，不仅能够逐步减少工作人员的工作量，而且还可以进行高效工作和管理。所以该系统的开发实现了最大的意义和价值，在系统完成后，利益是否大过于成本，是否能够达到预期效果，这些方面都要进行可行性分析，再通过分析之后，就可以决定是否开发此系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值