前言
在Flutter开发中，掌握基本组件的使用是构建高效应用的关键。本文将深入探讨Flutter框架下的核心组件及其用法，特别是简单的Stateless Widget，如文本和按钮，以及更复杂的StatefulWidget示例。
第一个flutter
widget
import 'package:flutter/material.dart'; class Echo extends StatelessWidget{ const Echo ({super.key}); @override Widget build(BuildContext context){ return Center( child: Container( //背景颜色 color: Colors.blue, child: const Text( 'hello flutter', //left to right textDirection: TextDirection.ltr, ), ), ); } } void main(List<String> args){ runApp(const Echo()); }
context
import 'package:flutter/material.dart'; class ContextRoute extends StatelessWidget { const ContextRoute({super.key}); // scaffold 脚手架 @override Widget build(BuildContext context) { // Scaffold find Widget 什么的 Scaffold scaffold= context.findAncestorWidgetOfExactType<Scaffold>()!; // 得到appBar 里面的内容 并返回 return (scaffold.appBar as AppBar).title!; } } void main(List<String> args) { runApp(MaterialApp( title: "my app", home: Scaffold( appBar: AppBar( title: const Text("myApp"), ), //设置body 的类容为 ContextRoute 的返回值 body: const ContextRoute(), ), )); }
StatefulWidget
import 'package:flutter/material.dart'; class CounterWidget extends StatefulWidget{ const CounterWidget({super.key}); @override State<StatefulWidget> createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget>{ int _counter=0; @override Widget build(BuildContext context) { return const MaterialApp( title: "Myapp", home: Scaffold( body: Center( child: TextButton( onPressed: () =>setState(()=> _counter++), child: Text('0', style: const TextStyle( fontSize: 28, ),), ), ), ), ); } } int count(var a){ return a++; } void main(List<String>list){ runApp(const CounterWidget()); }
import 'package:flutter/material.dart'; class Echo extends StatefulWidget{ @override State<StatefulWidget> createState() { return _Echo(); } } class _Echo extends State <Echo>{ @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title:const Text( "i am the title"), ), body:const Center( child: Text("i am the body"), ), floatingActionButton: FloatingActionButton( child: const Icon(Icons.add),onPressed: (){ print("hello,world"); }, ), ); } } void main(List<String> args){ runApp(MaterialApp( title: 'hello', home: Echo(), )); }
Widget
MaterialApp
装饰app
ThemeData 有的属性， ThemeData是Flutter UI框架中的一个类，用于定义应用程序的主题样式。它包含以下属性： appBarTheme：用于自定义AppBar（导航栏）的样式。 backgroundColor：用于定义应用程序的背景色。 bottomAppBarColor：用于定义底部导航栏的背景色。 brightness：用于定义状态栏的明亮模式，可以是Brightness.light或Brightness.dark。 buttonColor：用于定义按钮的背景色。 cardColor：用于定义卡片（Card）的背景色。 dialogBackgroundColor：用于定义对话框的背景色。 disabledColor：用于定义被禁用的组件的颜色。 dividerColor：用于定义分割线的颜色。 errorColor：用于定义错误信息的颜色。 focusColor：用于定义组件获得焦点时的颜色。 fontFamily：用于定义应用程序中的默认字体。 iconTheme：用于自定义图标的样式。 primaryColor：用于定义应用程序的主要颜色。 scaffoldBackgroundColor：用于定义Scaffold（脚手架）的背景色。 secondaryHeaderColor：用于定义辅助提示的背景色。 textTheme：用于自定义文本的样式。 这些属性可以根据需求进行自定义配置，以创建符合应用程序设计风格的主题样式。 在网上搜索更佳答案
container
box
return Center( child: Container( // 配置文字 居中 alignment: Alignment.center, width: 100, height: 100, // 装修盒子 decoration: BoxDecoration( color: Colors.red, border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow(color: Colors.black, blurRadius: 10), ], //LinearGradient,RadialGradient gradient: LinearGradient(colors: [Colors.blue, Colors.yellow])), // 改变方向 child: Text( 'this is a box', style: TextStyle(color: Colors.white), ), ), );
button
return Center( child: Container( width: 200, height: 40, alignment: Alignment.center, margin: EdgeInsets.all(10), // margin: EdgeInsets.fromLTRB(left, top, right, bottom), decoration: BoxDecoration( // color: Color.fromRGBO(10, 10, 10, 1) color: Colors.blue, borderRadius: BorderRadius.circular(10) ), child: Text('button',style: TextStyle( color: Colors.white, fontSize: 22, ),), ) );
动画
transform: Matrix4.translationValues(40, 0, 0), transform: Matrix4.rotationZ(0.2),
text
//改变文字样式 overflow: TextOverflow.ellipsis, fontStyle:normal,italic
StatefulWidget和statelessWidget
StatefulWidget 和 StatelessWidget 是 Flutter 框架中的两个重要概念，用于构建用户界面。
- StatefulWidget（有状态的小部件）： StatefulWidget 是表示有状态部件的类，其状态在生命周期中可以发生改变。要创建 StatefulWidget，需要定义一个继承自 StatefulWidget 的类，并为该类实现两个关键部分：
- State：StatefulWidget 的状态。它维护和管理与该部件相关的数据，并根据需要在部件生命周期中更新。State 是一个独立的对象，它与 StatefulWidget 一起创建，并且可以通过调用 setState() 方法来触发状态更新。
- build() 方法：在 State 中，build() 方法用于构建并返回表示该部件的用户界面。该方法会在初始化和每次状态更新时被调用。
- StatelessWidget（无状态的小部件）： StatelessWidget 表示没有可变状态的部件。一旦创建，它们的属性（如文本、样式）就不会发生更改。要创建 StatelessWidget，需要定义一个继承自 StatelessWidget 的类，并实现其中一个关键部分：
- build() 方法：通过 build() 方法来构建并返回表示该部件的用户界面。与 StatefulWidget 不同，StatelessWidget 没有可变状态，因此在构建后其外观不会发生变化。
总之，StatefulWidget 用于构建具有可变状态的部件，而 StatelessWidget 用于构建外观稳定且没有可变状态的部件。在 Flutter 应用程序中，通常根据需要选择使用哪种部件，以实现交互性和外观的要求。
appBar
AppBar 有哪些属性
AppBar是Flutter中的一个小部件，用于创建应用程序的导航栏。它具有以下常用属性：
backgroundColor：用于定义AppBar的背景颜色。
title：用于设置AppBar的标题文本，可以是一个文本小部件(例如Text)，也可以是一个图标小部件(例如Icon)。
actions：用于在AppBar的右侧添加操作按钮，可以是一个包含多个小部件的列表。
leading：用于设置AppBar的左侧导航按钮，通常是一个图标按钮(例如IconButton)。
centerTitle：用于定义标题是否位于AppBar的中间，默认为false，即标题位于左侧。
elevation：用于定义AppBar的阴影高度，默认为4.0。
brightness：用于定义状态栏的明亮模式，可以是Brightness.light或Brightness.dark。
iconTheme：用于自定义AppBar中图标的样式，如颜色、大小等。
textTheme：用于自定义AppBar中文本的样式，如颜色、大小等。
toolbarHeight：用于定义AppBar的高度，默认根据系统平台确定。
这些属性可以根据需求进行自定义配置，以创建符合应用程序设计风格的AppBar。
