Flutter 基础（二）基础 widget Text Image TextField Button

最新推荐文章于 2025-03-12 09:00:00 发布

AboBack

最新推荐文章于 2025-03-12 09:00:00 发布

阅读量465

点赞数

分类专栏： Flutter 基础文章标签： Flutter widget Text Image TextField

本文链接：https://blog.youkuaiyun.com/jhbxyz/article/details/100748024

版权

Flutter 基础专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Flutter的基础Widget，包括StatelessWidget与StatefulWidget的区别，Text、Image的使用，如Image.asset、Image.network等，TextField的介绍，以及不同类型的Button如FlatButton、RaisedButton和IconButton的应用。文中详细讲解了StatefulWidget中State的生命周期，以及图片加载的fit参数。此外，还提供了TextField和Button的事件回调操作示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 基础 widget

主要下面基本 widget 常用到的

StatelessWidget 和 StatefulWidget 的区别
文本 Text 相当于 Android 的 TextView
图片 Image 相当于 Android 的 ImageView

图片的来源可以是网络、文件、资源和内存
- Image.asset(name);
- Image.file(file);
- Image.memory(bytes);
- Image.network(src);
输入框 TextField 相当于 Android 的 EditView
按钮相当于 Android 的 Button
- FlatButton
- RaisedButton
- IconButton
- FloatActionButton

在这里插入图片描述

1.StatelessWidget 和 StatefulWidget 的区别

Widget immutable(不可变的)

StatelessWidget 是不可变的不能有动作（用户交互）
StatefulWidget 可变的通过改变状态使得 UI 发生变化，它可以包含用户交互，因为widget都是 immutable 因此需要配合State来保存状态
State拥有自己的声明周期

1.1StatelessWidget

示例

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

1.2.StatefulWidget

示例

class MyAppPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MyAppPageState();
  }
}

class _MyAppPageState extends State<MyAppPage>{
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

1.3 State 的生命周期

示例

class _MyAppPageState extends State<MyAppPage> {
  
  //create之后被insert到渲染树时调用的，只会调用一次
  @override
  void initState() {
    super.initState();
  }

  //state依赖的对象发生变化时调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  //Widget状态改变时候调用，可能会调用多次
  @override
  void didUpdateWidget(MyAppPage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  //构建Widget时调用
  @override
  Widget build(BuildContext context) {
    return null;
  }

  //当移除渲染树的时调用
  @override
  void deactivate() {
    super.deactivate();
  }

  //Widget即将销毁时调用
  @override
  void dispose() {
    super.dispose();
  }
}

2.文本 Text

示例

class _MyAppPageState extends State<MyAppPage> {
  //构建Widget时调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Widget'),
      ),
      body: Column(
        children: <Widget>[
          Text(
            '我是文本 Text',
            style: TextStyle(
                fontStyle: FontStyle.italic, color: Colors.red, fontSize: 18.0),
          ),
        ],
      ),
    );
  }

3.图片 Image

图片的来源可以是网络、文件、资源和内存

Image.asset(name);
Image.file(file);
Image.memory(bytes);
Image.network(src);

3.1fit 参数子类 BoxFit

BoxFit 身上有几个常量

contain
全图显示，保持原比例。

在这里插入图片描述

cover （相当于 Android 的 centerCrop）
全图充满，可能拉伸也可能被裁剪

在这里插入图片描述

fill
全图显示，通过拉伸来充满目标框

在这里插入图片描述
fitHeight
图片高度充满目标框，可能拉伸也可能被裁剪

在这里插入图片描述
fitWidth
图片宽度充满目标框，可能拉伸也可能被裁剪

在这里插入图片描述
none
保持图片的原始大小，剪裁掉位于目标框外的图片部分

在这里插入图片描述
scaleDown
与contain缩小图像的方式相同，只不过会在必要时缩小以确保图片完全在目标框内，如果不缩小等同于none。

在这里插入图片描述

3.2.Image.network

示例

//图片路径
final imageUrl = 'https://images.unsplash.com/';
class _MyAppPageState extends State<MyAppPage> {
  //构建Widget时调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Widget'),
      ),
      body: Container(
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              Text(
                '我是文本 Text',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    color: Colors.red,
                    fontSize: 18.0),
              ),
              Row(
                children: <Widget>[
                  Image.network(
                    //图片路径
                    imageUrl,
                    height: 100,
                    width: 100,
                    fit: BoxFit.cover,
                  )
                ],
              ),

3.3.Image.asset

创建包名assets 子包名 images 把图片（image_car.jpeg）放进去
在 pubspec.yaml 文件配置 assets:图片路径

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:
     - assets/images/image_car.jpeg

调用 Image.asset()方法显示本地图片

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Demo 1',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout Demo 1'),
        ),
        body: Image.asset(
          'assets/images/image_car.jpeg',
          width: 200,
          height: 100,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

4.输入框 TextField

完整代码请看下面代码链接

示例

class _MyAppPageState extends State<MyAppPage> {

  var _editController = TextEditingController();

  //构建Widget时调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Widget'),
      ),
      body: Container(
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              TextField(
                controller: _editController,
                //自动弹起软键盘
                autofocus: true,
              ),
            ],
          )),
    );
  }

  //create之后被insert到渲染树时调用的，只会调用一次
  @override
  void initState() {
    super.initState();
    _editController.addListener((){


    });
  }

  //Widget即将销毁时调用
  @override
  void dispose() {
    super.dispose();
    _editController.dispose();
  }
}

5.按钮

onPressed 方法是事件的回调

示例

class _MyAppPageState extends State<MyAppPage> {

  //构建Widget时调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Widget'),
      ),
      body: Container(
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  FlatButton(
                    onPressed: () {},
                    child: Text('我是 FlatButton'),
                    color: Colors.red,
                  ),
                  Padding(
                    padding: EdgeInsets.all(3.0),
                  ),
                  RaisedButton(
                    onPressed: () {},
                    child: Text('我是 RaisedButton'),
                    color: Colors.cyanAccent,
                    elevation: 10,
                  ),
                ],
              ),
              FloatingActionButton(
                onPressed: () {},
                child: Icon(Icons.add),
                elevation: 10,
              ),
						 IconButton(
                icon: Icon(Icons.favorite),
                color: Colors.green,
                onPressed: () {
                  debugPrint('onPressed');
                },
            ],
          )),
    );
  }

}