Flutter快速入门学习(一)

目录

前言

新建项目

项目入口

Dart的入口(项目的入口)

布局

视图组件

Container(容器)

Text(文本)

Image(图片)

Row(水平布局)和Column(垂直布局)

ListView(列表视图)

GridView(网格视图)

Stack(层叠布局)

Card(卡片)

AppBar(应用栏)

FloatingActionButton(浮动操作按钮)

TextField(文本输入框)

Button(按钮)

Checkbox(复选框)

Radio(单选框)

Switch(开关)

Slider(滑块)

ProgressIndicator(进度指示器)

AlertDialog(对话框)


前言

前面搭建环境,创建项目什么的,都太过简单

废话不多讲~开整~我们直接上代码~开始学习

新建项目

新建了项目是不是有点蒙不知道在哪里开始写我们的hello world?

新建了一个项目android和ios两个包,按我个人的理解就是,都预制加载了Dart写好的好的界面

一般有特殊需求需要在对应项目里添加需求需要的配置项

这里我们入门学习,所以这一块就不多讲了

文档

Dart文档指南Learn to use the Dart language and libraries.https://dart.dev/guides

项目入口

Dart的入口(项目的入口)

main.dart

Dart 复制代码
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '阿斯顿'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

布局

在这个例子中,我们使用了Stack来创建一个层层叠加的布局。在Stack中,我们使用了Positioned来实现绝对布局,Align来实现相对布局,以及Positioned.fill来实现权重布局。

每个PositionedAlign都有topleftrightbottom等属性,用于指定子部件的位置。Positioned.fill会将子部件填充满整个父部件。

通过这种层层叠加的布局方式,我们可以实现复杂的界面布局。

Dart 复制代码
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack( // 使用绝对布局
          children: [
            Positioned( // 使用相对布局
              top: 50,
              left: 50,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            Positioned(
              top: 100,
              left: 100,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            Align( // 使用相对布局
              alignment: Alignment.bottomCenter,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
            ),
            Positioned(
              top: 200,
              left: 200,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
            ),
            Positioned.fill( // 使用权重布局
              child: Container(
                color: Colors.orange,
                child: Center(
                  child: Text(
                    'Hello World',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

视图组件

Container(容器)

用于创建一个矩形的容器,可以设置背景颜色、边框、内边距等属性。

  • alignment:设置Container内部子组件的对齐方式。
  • padding:设置Container内部子组件的内边距。
  • color:设置Container的背景颜色。
  • width:设置Container的宽度。
  • height:设置Container的高度。
  • margin:设置Container与其父组件之间的外边距。
  • decoration:设置Container的装饰,可以包括背景图片、边框等。
  • child:设置Container的子组件。

以下是一个使用注释说明的例子:

Dart 复制代码
Container(
  // 设置Container的宽度为200
  width: 200,
  // 设置Container的高度为100
  height: 100,
  // 设置Container的背景颜色为红色
  color: Colors.red,
  // 设置Container与其父组件之间的外边距为10
  margin: EdgeInsets.all(10),
  // 设置Container内部子组件的对齐方式为居中
  alignment: Alignment.center,
  // 设置Container内部子组件的内边距为20
  padding: EdgeInsets.all(20),
  // 设置Container的装饰,包括背景图片和边框
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/background.png'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  // 设置Container的子组件为一个文本组件
  child: Text('Hello World'),
)

Text(文本)

用于显示文本内容,可以设置字体样式、颜色、对齐方式等属性。

  • data:设置Text显示的文本内容。
  • style:设置Text的样式,包括字体、大小、颜色等。
  • textAlign:设置Text的对齐方式。
  • maxLines:设置Text显示的最大行数。
  • overflow:设置Text超出最大行数时的处理方式。
  • textDirection:设置Text的文本方向。
  • softWrap:设置Text是否自动换行。
  • textScaleFactor:设置Text的缩放比例

以下是一个使用注释说明的例子:

Dart 复制代码
Text(
  // 设置Text显示的文本内容为Hello World
  data: 'Hello World',
  // 设置Text的样式,包括字体、大小、颜色等
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  // 设置Text的对齐方式为居中
  textAlign: TextAlign.center,
  // 设置Text显示的最大行数为2
  maxLines: 2,
  // 设置Text超出最大行数时的处理方式为省略号
  overflow: TextOverflow.ellipsis,
  // 设置Text的文本方向为从左到右
  textDirection: TextDirection.ltr,
  // 设置Text是否自动换行为true
  softWrap: true,
  // 设置Text的缩放比例为1.5
  textScaleFactor: 1.5,
)

Image(图片)

用于显示图片,可以从本地或网络加载图片。

  • image:指定要显示的图片,可以是本地图片、网络图片或者内存图片。可以使用AssetImage、NetworkImage或者MemoryImage来创建ImageProvider对象。

  • width:指定图片的宽度,可以是具体数值或者是一个占位符,如:double.infinity表示宽度填充父容器。

  • height:指定图片的高度,可以是具体数值或者是一个占位符,如:double.infinity表示高度填充父容器。

  • fit:指定图片的适应方式,可以是BoxFit.contain(保持图片的宽高比,将图片完整地显示在容器内)、BoxFit.cover(保持图片的宽高比,将图片完整地显示在容器内并裁剪超出部分)、BoxFit.fill(拉伸图片以填充容器)、BoxFit.fitWidth(保持图片的宽高比,将图片宽度填充容器)、BoxFit.fitHeight(保持图片的宽高比,将图片高度填充容器)等。

  • alignment:指定图片在容器中的对齐方式,可以是Alignment.center(居中对齐)、Alignment.topLeft(左上对齐)、Alignment.bottomRight(右下对齐)等。

  • repeat:指定图片的重复方式,可以是ImageRepeat.noRepeat(不重复)、ImageRepeat.repeat(水平和垂直方向都重复)、ImageRepeat.repeatX(水平方向重复)、ImageRepeat.repeatY(垂直方向重复)等。

下面是一个使用注释说明的例子:

Dart 复制代码
Image(
  image: AssetImage('assets/images/flutter_logo.png'), // 指定要显示的本地图片
  width: 200, // 指定图片的宽度
  height: 200, // 指定图片的高度
  fit: BoxFit.cover, // 图片适应方式为完整地显示在容器内并裁剪超出部分
  alignment: Alignment.center, // 图片居中对齐
  repeat: ImageRepeat.noRepeat, // 图片不重复
)

Row(水平布局)和Column(垂直布局)

用于将子组件按水平或垂直方向排列。

  1. mainAxisAlignment(主轴对齐方式):用于控制子组件在主轴上的对齐方式。

    • MainAxisAlignment.start:子组件在主轴上靠近起始位置。
    • MainAxisAlignment.end:子组件在主轴上靠近结束位置。
    • MainAxisAlignment.center:子组件在主轴上居中对齐。
    • MainAxisAlignment.spaceBetween:子组件在主轴上均匀分布,首尾不留空隙。
    • MainAxisAlignment.spaceAround:子组件在主轴上均匀分布,首尾留有空隙。
    • MainAxisAlignment.spaceEvenly:子组件在主轴上均匀分布,包括首尾。
  2. crossAxisAlignment(交叉轴对齐方式):用于控制子组件在交叉轴上的对齐方式。

    • CrossAxisAlignment.start:子组件在交叉轴上靠近起始位置。
    • CrossAxisAlignment.end:子组件在交叉轴上靠近结束位置。
    • CrossAxisAlignment.center:子组件在交叉轴上居中对齐。
    • CrossAxisAlignment.stretch:子组件在交叉轴上拉伸填充父容器。
    • CrossAxisAlignment.baseline:子组件在交叉轴上以基线对齐。
  3. mainAxisSize(主轴尺寸):用于控制主轴的尺寸。

    • MainAxisSize.max:主轴尽可能地占用父容器的空间。
    • MainAxisSize.min:主轴尽可能地缩小到子组件所需的最小空间。
  4. verticalDirection(垂直方向):用于控制子组件的布局方向。

    • VerticalDirection.down:子组件从上到下排列。
    • VerticalDirection.up:子组件从下到上排列。

以下是一个使用注释说明的示例:

Dart 复制代码
Row(
  // 主轴对齐方式:居中对齐
  mainAxisAlignment: MainAxisAlignment.center,
  // 交叉轴对齐方式:居中对齐
  crossAxisAlignment: CrossAxisAlignment.center,
  // 主轴尺寸:尽可能地占用父容器的空间
  mainAxisSize: MainAxisSize.max,
  // 垂直方向:从上到下排列
  verticalDirection: VerticalDirection.down,
  children: [
    // 子组件
    Text('Child 1'),
    Text('Child 2'),
    Text('Child 3'),
  ],
);

ListView(列表视图)

用于显示一个可滚动的列表,可以是垂直或水平方向。

  1. scrollDirection(滚动方向):指定列表的滚动方向,可以是垂直方向(默认值)或水平方向。

    • 值:Axis.vertical(垂直方向,默认值)、Axis.horizontal(水平方向)
  2. reverse(反向滚动):指定列表是否反向滚动。

    • 值:true、false(默认值)
  3. controller(滚动控制器):指定列表的滚动控制器,可以用于控制滚动位置或监听滚动事件。

    • 值:ScrollController对象
  4. primary(主轴方向上是否填充):指定列表的主轴方向上是否填充。

    • 值:true、false(默认值)
  5. physics(滚动物理效果):指定列表的滚动物理效果。

    • 值:ScrollPhysics对象
  6. shrinkWrap(是否根据子组件尺寸调整大小):指定列表是否根据子组件尺寸调整大小。

    • 值:true、false(默认值)
  7. padding(内边距):指定列表的内边距。

    • 值:EdgeInsets对象
  8. itemExtent(子组件固定尺寸):指定子组件的固定尺寸,用于优化性能。

    • 值:double类型
  9. children(子组件列表):指定列表的子组件列表。

    • 值:List<Widget>对象

使用注释说明如下:

Dart 复制代码
ListView(
  // 滚动方向为垂直方向
  scrollDirection: Axis.vertical,
  // 不反向滚动
  reverse: false,
  // 使用自定义的滚动控制器
  controller: ScrollController(),
  // 主轴方向上不填充
  primary: false,
  // 使用默认的滚动物理效果
  physics: null,
  // 根据子组件尺寸调整大小
  shrinkWrap: true,
  // 内边距为10.0
  padding: EdgeInsets.all(10.0),
  // 子组件固定尺寸为50.0
  itemExtent: 50.0,
  // 子组件列表
  children: [
    // 子组件1
    Container(),
    // 子组件2
    Container(),
    // ...
  ],
)

遇到多布局的时候,我们使用ListView.builder来创建一个包含10个项的ListView。在itemBuilder中,我们根据index的奇偶性来决定使用不同的布局。偶数项使用红色背景的布局,奇数项使用蓝色背景的布局。每个布局都包含一个居中的文本,显示对应的项号,运行一下代码,你将看到一个多布局的ListView,其中偶数项的背景为红色,奇数项的背景为蓝色。

Dart 复制代码
import 'package:flutter/material.dart';

class MultiLayoutListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (BuildContext context, int index) {
        if (index % 2 == 0) {
          // 偶数项使用红色背景的布局
          return Container(
            color: Colors.red,
            height: 100,
            child: Center(
              child: Text(
                'Item $index',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          );
        } else {
          // 奇数项使用蓝色背景的布局
          return Container(
            color: Colors.blue,
            height: 150,
            child: Center(
              child: Text(
                'Item $index',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          );
        }
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Multi Layout ListView'),
      ),
      body: MultiLayoutListView(),
    ),
  ));
}

GridView(网格视图)

用于显示一个二维网格布局的列表。

  1. scrollDirection:设置滚动方向,可选值为Axis.vertical(垂直方向)和Axis.horizontal(水平方向)。
  2. reverse:设置是否反向滚动,默认为false。
  3. controller:设置滚动控制器,可以用于控制滚动位置和监听滚动事件。
  4. primary:设置是否使用父级的PrimaryScrollController,默认为false。
  5. physics:设置滚动物理效果,例如BouncingScrollPhysics、ClampingScrollPhysics等。
  6. shrinkWrap:设置是否根据子项的总长度来确定GridView的长度,默认为false。
  7. padding:设置GridView的内边距。
  8. crossAxisSpacing:设置子项在交叉轴方向的间距。
  9. mainAxisSpacing:设置子项在主轴方向的间距。
  10. childAspectRatio:设置子项的宽高比。
  11. children:设置GridView的子项列表

使用注释说明的示例代码如下:

Dart 复制代码
GridView(
  // 设置滚动方向为垂直方向
  scrollDirection: Axis.vertical,
  // 设置是否反向滚动
  reverse: false,
  // 设置滚动控制器
  controller: ScrollController(),
  // 设置是否使用父级的PrimaryScrollController
  primary: false,
  // 设置滚动物理效果
  physics: BouncingScrollPhysics(),
  // 设置是否根据子项的总长度来确定GridView的长度
  shrinkWrap: false,
  // 设置GridView的内边距
  padding: EdgeInsets.all(10),
  // 设置子项在交叉轴方向的间距
  crossAxisSpacing: 10,
  // 设置子项在主轴方向的间距
  mainAxisSpacing: 10,
  // 设置子项的宽高比
  childAspectRatio: 1,
  // 设置GridView的子项列表
  children: [
    // 子项1
    Container(),
    // 子项2
    Container(),
    // 子项3
    Container(),
  ],
)

Stack(层叠布局)

用于将子组件按照层叠的方式进行布局。

  1. alignment(对齐方式):指定子组件在Stack中的对齐方式。

    • Alignment对象,默认值为AlignmentDirectional.topStart
  2. fit(未定位子组件的处理方式):指定未定位的子组件在Stack中的处理方式。

    • StackFit枚举类型,默认值为StackFit.loose
    • StackFit.loose:未定位的子组件根据自身大小来确定位置
    • StackFit.expand:未定位的子组件填充满Stack的大小
  3. overflow(溢出处理方式):指定子组件超出Stack范围时的处理方式。

    • Overflow枚举类型,默认值为Overflow.clip
    • Overflow.clip:超出部分裁剪掉
    • Overflow.visible:超出部分仍然可见

使用注释说明如下:

Dart 复制代码
Stack(
  // 对齐方式为居中对齐
  alignment: Alignment.center,
  // 未定位的子组件根据自身大小来确定位置
  fit: StackFit.loose,
  // 超出部分裁剪掉
  overflow: Overflow.clip,
  children: [
    // 子组件1
    Positioned(
      // 子组件1的左上角对齐Stack的左上角
      top: 0,
      left: 0,
      child: Container(),
    ),
    // 子组件2
    Positioned(
      // 子组件2的右下角对齐Stack的右下角
      bottom: 0,
      right: 0,
      child: Container(),
    ),
    // 子组件3
    Container(),
  ],
)

Card(卡片)

用于创建一个带有圆角和阴影效果的卡片。

  1. color:卡片的背景颜色,可以是一个Color对象。 示例:color: Colors.blue

  2. elevation:卡片的高度,用于创建阴影效果,可以是一个double值。 示例:elevation: 4.0

  3. shape:卡片的形状,可以是一个ShapeBorder对象。 示例:shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))

  4. margin:卡片的外边距,可以是一个EdgeInsets对象。 示例:margin: EdgeInsets.all(10.0)

  5. child:卡片的内容部件,可以是任何Widget。 示例:child: Text('Hello World')

使用注释说明可以通过在属性前添加注释来提供更多信息,例如:

Dart 复制代码
Card(
  // 设置卡片的背景颜色为红色
  color: Colors.red,
  
  // 设置卡片的高度为8.0
  elevation: 8.0,
  
  // 设置卡片的形状为圆角矩形
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  
  // 设置卡片的外边距为10.0
  margin: EdgeInsets.all(10.0),
  
  // 设置卡片的内容为一个文本部件
  child: Text('Hello World'),
)

AppBar(应用栏)

用于创建一个顶部导航栏,通常包含标题、图标和操作按钮。

  1. leading:Widget类型,设置在AppBar左侧的控件,通常是一个图标按钮或者返回按钮。
  2. title:Widget类型,设置AppBar中间的标题控件。
  3. actions:List<Widget>类型,设置在AppBar右侧的控件列表。
  4. backgroundColor:Color类型,设置AppBar的背景颜色。
  5. elevation:double类型,设置AppBar的阴影高度。
  6. brightness:Brightness类型,设置AppBar的亮度模式,可以是Brightness.light(浅色模式)或Brightness.dark(深色模式)。
  7. centerTitle:bool类型,设置标题是否居中显示。
  8. automaticallyImplyLeading:bool类型,设置是否自动显示leading控件,默认为true。
  9. flexibleSpace:Widget类型,设置AppBar的可伸缩空间,通常用于实现一些特殊的效果,比如渐变背景。
  10. bottom:PreferredSizeWidget类型,设置AppBar底部的控件,通常是一个TabBar或者PreferredSize组件。
  11. shape:ShapeBorder类型,设置AppBar的形状,比如RoundedRectangleBorder。
  12. toolbarHeight:double类型,设置AppBar的高度。
  13. toolbarOpacity:double类型,设置AppBar的透明度。

以下是一个使用注释说明的例子:

Dart 复制代码
AppBar(
  // 设置AppBar左侧的返回按钮
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      // 返回上一页的操作
    },
  ),
  // 设置AppBar中间的标题
  title: Text('App Bar'),
  // 设置AppBar右侧的控件列表
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 执行搜索操作
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // 执行更多操作
      },
    ),
  ],
  // 设置AppBar的背景颜色
  backgroundColor: Colors.blue,
  // 设置AppBar的阴影高度
  elevation: 4.0,
  // 设置AppBar的亮度模式为浅色模式
  brightness: Brightness.light,
  // 设置标题居中显示
  centerTitle: true,
  // 设置AppBar的高度
  toolbarHeight: 56.0,
)

FloatingActionButton(浮动操作按钮)

用于创建一个悬浮在界面上的圆形按钮,通常用于执行主要操作。

  1. onPressed:点击按钮时触发的回调函数。
  2. tooltip:当用户长按按钮时显示的文本提示。
  3. child:按钮的子组件,通常是一个图标。
  4. backgroundColor:按钮的背景颜色。
  5. foregroundColor:按钮的前景颜色,用于图标和文本。
  6. elevation:按钮的阴影高度。
  7. highlightElevation:按钮在被按下时的阴影高度。
  8. disabledElevation:按钮被禁用时的阴影高度。
  9. shape:按钮的形状,可以是圆形、矩形等。
  10. heroTag:用于在页面切换时指定按钮的唯一标识符。
  11. mini:是否将按钮设置为小尺寸。
  12. isExtended:是否将按钮设置为扩展尺寸。
  13. clipBehavior:按钮的裁剪行为,用于处理子组件超出按钮范围的情况。

这些属性可以根据需要进行组合使用,例如:

Dart 复制代码
FloatingActionButton(
  onPressed: () {
    // 点击按钮时触发的回调函数
  },
  tooltip: 'Add',
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  elevation: 4.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
)

在上面的例子中,当用户点击按钮时,会触发一个回调函数。按钮上显示一个加号图标,背景颜色为蓝色,前景颜色为白色,阴影高度为4.0,形状为圆角矩形。

TextField(文本输入框)

用于接收用户的文本输入。

  1. controller:TextEditingController类型,用于控制文本输入框的内容。
  2. focusNode:FocusNode类型,用于控制文本输入框的焦点。
  3. decoration:InputDecoration类型,用于设置文本输入框的装饰样式,比如边框、提示文本等。
  4. keyboardType:TextInputType类型,用于设置键盘类型,比如数字键盘、邮箱键盘等。
  5. textInputAction:TextInputAction类型,用于设置键盘动作按钮的类型,比如完成、下一步等。
  6. style:TextStyle类型,用于设置文本输入框中文本的样式,比如字体、颜色等。
  7. onChanged:ValueChanged<String>类型,当文本输入框的内容发生变化时触发的回调函数。
  8. onSubmitted:ValueChanged<String>类型,当用户提交文本输入时触发的回调函数。
  9. maxLength:int类型,限制文本输入框的最大字符数。
  10. obscureText:bool类型,是否将输入内容隐藏为密码形式。
  11. autocorrect:bool类型,是否自动纠正用户输入的文本。
  12. autofocus:bool类型,是否自动获取焦点。
  13. enabled:bool类型,是否启用文本输入框。
  14. textAlign:TextAlign类型,设置文本在文本输入框中的对齐方式。
  15. cursorColor:Color类型,设置光标的颜色。

以下是一个使用注释说明的例子:

Dart 复制代码
TextField(
  // 用于控制文本输入框的内容
  controller: _textEditingController,
  
  // 用于控制文本输入框的焦点
  focusNode: _focusNode,
  
  // 用于设置文本输入框的装饰样式
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    border: OutlineInputBorder(),
  ),
  
  // 用于设置键盘类型
  keyboardType: TextInputType.text,
  
  // 用于设置键盘动作按钮的类型
  textInputAction: TextInputAction.done,
  
  // 用于设置文本输入框中文本的样式
  style: TextStyle(
    fontSize: 16.0,
    color: Colors.black,
  ),
  
  // 当文本输入框的内容发生变化时触发的回调函数
  onChanged: (value) {
    // 处理文本变化的逻辑
  },
  
  // 当用户提交文本输入时触发的回调函数
  onSubmitted: (value) {
    // 处理文本提交的逻辑
  },
  
  // 限制文本输入框的最大字符数
  maxLength: 20,
  
  // 是否将输入内容隐藏为密码形式
  obscureText: false,
  
  // 是否自动纠正用户输入的文本
  autocorrect: true,
  
  // 是否自动获取焦点
  autofocus: false,
  
  // 是否启用文本输入框
  enabled: true,
  
  // 设置文本在文本输入框中的对齐方式
  textAlign: TextAlign.start,
  
  // 设置光标的颜色
  cursorColor: Colors.blue,
)

Button(按钮)

用于创建一个可点击的按钮,可以设置样式和点击事件。

  1. onPressed:指定按钮被点击时的回调函数。通常使用匿名函数或方法引用来定义回调函数。例如:onPressed: () { /* 点击按钮后执行的代码 */ }

  2. child:指定按钮上显示的子部件。可以是Text、Icon等。例如:child: Text('按钮文本')

  3. color:指定按钮的背景颜色。可以使用Color对象或者Color值。例如:color: Colors.blue

  4. textColor:指定按钮文本的颜色。可以使用Color对象或者Color值。例如:textColor: Colors.white

  5. disabledColor:指定按钮在禁用状态下的背景颜色。例如:disabledColor: Colors.grey

  6. disabledTextColor:指定按钮在禁用状态下的文本颜色。例如:disabledTextColor: Colors.white

  7. padding:指定按钮的内边距。可以使用EdgeInsets对象来定义上、下、左、右的边距值。例如:padding: EdgeInsets.all(10.0)

  8. shape:指定按钮的形状。可以使用RoundedRectangleBorder、CircleBorder等形状。例如:shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))

  9. splashColor:指定按钮被按下时的水波纹颜色。例如:splashColor: Colors.red

  10. elevation:指定按钮的阴影高度。例如:elevation: 5.0

使用注释说明可以在代码中添加注释来解释每个属性的作用,例如:

Dart 复制代码
FlatButton(
  onPressed: () {
    // 点击按钮后执行的代码
  },
  child: Text('按钮文本'),
  color: Colors.blue, // 按钮背景颜色
  textColor: Colors.white, // 按钮文本颜色
  disabledColor: Colors.grey, // 禁用状态下的背景颜色
  disabledTextColor: Colors.white, // 禁用状态下的文本颜色
  padding: EdgeInsets.all(10.0), // 按钮内边距
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), // 按钮形状
  splashColor: Colors.red, // 按钮按下时的水波纹颜色
  elevation: 5.0, // 按钮阴影高度
)

Checkbox(复选框)

用于表示一个可选中或取消选中的选项。

  1. value:bool类型,表示复选框的选中状态。如果为true,则复选框被选中;如果为false,则复选框未被选中。
  2. onChanged:ValueChanged<bool>类型,表示当复选框的选中状态发生改变时的回调函数。可以在回调函数中更新复选框的选中状态。
  3. activeColor:Color类型,表示复选框选中时的颜色。默认为主题颜色。
  4. checkColor:Color类型,表示复选框内部勾选标记的颜色。默认为白色。
  5. tristate:bool类型,表示复选框是否支持三态(选中、未选中、不确定)。默认为false,即不支持三态。
  6. materialTapTargetSize:MaterialTapTargetSize类型,表示复选框的点击目标大小。默认为MaterialTapTargetSize.padded。
  7. visualDensity:VisualDensity类型,表示复选框的视觉密度。默认为VisualDensity.comfortable。

使用注释说明可以在代码中添加注释来解释每个属性的作用,例如:

Dart 复制代码
Checkbox(
  value: _isChecked, // 当前复选框的选中状态
  onChanged: (bool newValue) {
    setState(() {
      _isChecked = newValue; // 更新复选框的选中状态
    });
  },
  activeColor: Colors.blue, // 复选框选中时的颜色
  checkColor: Colors.white, // 复选框内部勾选标记的颜色
  tristate: false, // 不支持三态
  materialTapTargetSize: MaterialTapTargetSize.padded, // 复选框的点击目标大小
  visualDensity: VisualDensity.comfortable, // 复选框的视觉密度
)

Radio(单选框)

用于表示一组选项中的单个选项。

  1. value:T类型,表示单选框的值。当单选框被选中时,它的值将被传递给groupValue。
  2. groupValue:T类型,表示单选框组的值。当单选框的值与groupValue相等时,该单选框将被选中。
  3. onChanged:ValueChanged<T>类型,表示当单选框的选中状态发生改变时的回调函数。可以在回调函数中更新groupValue的值。
  4. activeColor:Color类型,表示单选框选中时的颜色。默认为主题颜色。
  5. materialTapTargetSize:MaterialTapTargetSize类型,表示单选框的点击目标大小。默认为MaterialTapTargetSize.padded。
  6. visualDensity:VisualDensity类型,表示单选框的视觉密度。默认为VisualDensity.comfortable。

使用注释说明可以在代码中添加注释来解释每个属性的作用,例如:

Dart 复制代码
Radio(
  value: _selectedValue, // 当前单选框的值
  groupValue: _groupValue, // 单选框组的值
  onChanged: (T newValue) {
    setState(() {
      _groupValue = newValue; // 更新单选框组的值
    });
  },
  activeColor: Colors.blue, // 单选框选中时的颜色
  materialTapTargetSize: MaterialTapTargetSize.padded, // 单选框的点击目标大小
  visualDensity: VisualDensity.comfortable, // 单选框的视觉密度
)

Switch(开关)

用于表示一个开关状态的组件。

  1. value:bool类型,表示开关的当前状态,true表示开启,false表示关闭。

  2. onChanged:Function类型,当开关状态发生改变时触发的回调函数。

  3. activeColor:Color类型,表示开启状态下的颜色。

  4. activeTrackColor:Color类型,表示开启状态下的轨道颜色。

  5. inactiveThumbColor:Color类型,表示关闭状态下的滑块颜色。

  6. inactiveTrackColor:Color类型,表示关闭状态下的轨道颜色。

  7. activeThumbImage:ImageProvider类型,表示开启状态下的滑块图片。

  8. inactiveThumbImage:ImageProvider类型,表示关闭状态下的滑块图片。

  9. dragStartBehavior:DragStartBehavior类型,表示滑动开始的行为。

下面是一个例子,演示了如何使用Switch组件及其属性:

Dart 复制代码
bool switchValue = false; // 开关的初始状态为关闭

Switch(
  value: switchValue, // 开关的当前状态
  onChanged: (bool newValue) {
    setState(() {
      switchValue = newValue; // 开关状态改变时更新状态值
    });
  },
  activeColor: Colors.blue, // 开启状态下的颜色为蓝色
  activeTrackColor: Colors.blue[200], // 开启状态下的轨道颜色为浅蓝色
  inactiveThumbColor: Colors.grey, // 关闭状态下的滑块颜色为灰色
  inactiveTrackColor: Colors.grey[300], // 关闭状态下的轨道颜色为浅灰色
  activeThumbImage: AssetImage('assets/images/switch_on.png'), // 开启状态下的滑块图片为switch_on.png
  inactiveThumbImage: AssetImage('assets/images/switch_off.png'), // 关闭状态下的滑块图片为switch_off.png
  dragStartBehavior: DragStartBehavior.start, // 滑动开始的行为为从滑块开始
)

在上述例子中,当开关的状态发生改变时,会调用onChanged回调函数来更新开关的状态值。开启状态下的颜色为蓝色,轨道颜色为浅蓝色,滑块颜色为灰色,轨道颜色为浅灰色。同时,开启状态下的滑块图片为switch_on.png,关闭状态下的滑块图片为switch_off.png。滑动开始的行为为从滑块开始。

Slider(滑块)

用于表示一个可拖动的滑块,可以选择一个范围内的值。

  1. value:double类型,表示滑块的当前值。

  2. onChanged:Function类型,当滑块的值发生改变时触发的回调函数。

  3. onChangeStart:Function类型,当滑块开始滑动时触发的回调函数。

  4. onChangeEnd:Function类型,当滑块停止滑动时触发的回调函数。

  5. min:double类型,表示滑块的最小值。

  6. max:double类型,表示滑块的最大值。

  7. divisions:int类型,表示滑块的离散间隔数量。

  8. label:String类型,表示滑块当前值的标签。

  9. activeColor:Color类型,表示滑块的激活颜色。

  10. inactiveColor:Color类型,表示滑块的非激活颜色。

下面是一个例子,演示了如何使用Slider组件及其属性:

Dart 复制代码
double sliderValue = 0.0; // 滑块的初始值为0

Slider(
  value: sliderValue, // 滑块的当前值
  onChanged: (double newValue) {
    setState(() {
      sliderValue = newValue; // 滑块值改变时更新状态值
    });
  },
  onChangeStart: (double startValue) {
    print('滑块开始滑动,当前值为:$startValue'); // 滑块开始滑动时的回调函数
  },
  onChangeEnd: (double endValue) {
    print('滑块停止滑动,当前值为:$endValue'); // 滑块停止滑动时的回调函数
  },
  min: 0.0, // 滑块的最小值为0
  max: 100.0, // 滑块的最大值为100
  divisions: 5, // 滑块的离散间隔数量为5
  label: sliderValue.toString(), // 滑块当前值的标签
  activeColor: Colors.blue, // 滑块的激活颜色为蓝色
  inactiveColor: Colors.grey, // 滑块的非激活颜色为灰色
)

在上述例子中,当滑块的值发生改变时,会调用onChanged回调函数来更新滑块的状态值。滑块的最小值为0,最大值为100,离散间隔数量为5。滑块的激活颜色为蓝色,非激活颜色为灰色。滑块当前值的标签显示在滑块上方。当滑块开始滑动时,会触发onChangeStart回调函数,并打印当前值。当滑块停止滑动时,会触发onChangeEnd回调函数,并打印当前值。

ProgressIndicator(进度指示器)

用于显示一个进度指示器,可以是圆形、线性或自定义样式。

  1. value:表示当前进度的值,取值范围为0.0到1.0,默认为0.0。
  2. backgroundColor:指示器的背景颜色。
  3. valueColor:指示器的前景颜色,可以是固定颜色或动画颜色。
  4. strokeWidth:指示器的线条宽度。
  5. semanticsLabel:用于辅助功能的标签,描述进度指示器的含义。

下面是一个示例,演示了如何使用CircularProgressIndicator(圆形进度指示器)并设置其属性:

Dart 复制代码
import 'package:flutter/material.dart';

class MyProgressIndicator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Indicator Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(  // 使用CircularProgressIndicator
              value: 0.5,  // 设置进度值为0.5
              backgroundColor: Colors.grey,  // 设置背景颜色为灰色
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),  // 设置前景颜色为蓝色
              strokeWidth: 5.0,  // 设置线条宽度为5.0
              semanticsLabel: 'Loading',  // 设置辅助功能标签
            ),
            SizedBox(height: 20.0),  // 添加间距
            LinearProgressIndicator(  // 使用LinearProgressIndicator
              value: 0.8,  // 设置进度值为0.8
              backgroundColor: Colors.grey,  // 设置背景颜色为灰色
              valueColor: AlwaysStoppedAnimation<Color>(Colors.green),  // 设置前景颜色为绿色
              minHeight: 10.0,  // 设置最小高度为10.0
              semanticsLabel: 'Loading',  // 设置辅助功能标签
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyProgressIndicator(),
  ));
}

在上面的示例中,我们创建了一个包含两个进度指示器的页面。第一个是CircularProgressIndicator,它的进度值为0.5,背景颜色为灰色,前景颜色为蓝色,线条宽度为5.0,辅助功能标签为"Loading"。第二个是LinearProgressIndicator,它的进度值为0.8,背景颜色为灰色,前景颜色为绿色,最小高度为10.0,辅助功能标签为"Loading"。

AlertDialog(对话框)

用于显示一个对话框,通常用于提示用户或获取用户的确认。

  1. title:对话框的标题,类型为Widget,默认为。
  2. content:对话框的内容,类型为Widget,默认为。
  3. actions:对话框的操作按钮,类型为List<Widget>,默认为。
  4. shape:对话框的形状,类型为ShapeBorder,默认为一个圆角矩形。
  5. backgroundColor:对话框的背景颜色,类型为Color,默认为白色。
  6. elevation:对话框的高度,类型为double,默认为24.0。
  7. semanticLabel:对话框的语义标签,类型为String,默认为。

下面是一个例子,演示了如何创建一个AlertDialog并设置其属性:

Dart 复制代码
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AlertDialog Example'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show Dialog'),
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('Confirmation'),
                    content: Text('Are you sure you want to delete this item?'),
                    actions: [
                      FlatButton(
                        child: Text('Cancel'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      FlatButton(
                        child: Text('Delete'),
                        onPressed: () {
                          // Perform delete operation
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个AlertDialog,设置了标题为"Confirmation",内容为"Are you sure you want to delete this item?"。对话框有两个操作按钮,一个是"Cancel",点击后关闭对话框,另一个是"Delete",点击后执行删除操作并关闭对话框。

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
茯苓gao4 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾4 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT5 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa5 小时前
HTML和CSS学习
前端·css·学习·html
看海天一色听风起雨落6 小时前
Python学习之装饰器
开发语言·python·学习
speop7 小时前
llm的一点学习笔记
笔记·学习
非凡ghost7 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
ue星空7 小时前
月2期学习笔记
学习·游戏·ue5
萧邀人8 小时前
第二课、熟悉Cocos Creator 编辑器界面
学习