Flutter开发③——组件_flutter 组件

目录

Container容器组件

decoration属性

 padding和maring属性

transform属性

Text组件

 TextStyle参数

图片组件

Container实现圆形图片

 ClipOval实现圆形图片

 加载本地图片

 图标组件

自带的Icons图标

借助阿里巴巴图标库自定义字体图标

ListView列表组件

垂直列表

水平列表 可左右滑动

 动态列表

 通过ListView的构造函数builder来生成动态列表

GridView网格组件

GridView.count

 GridView.extend

动态生成

GridView.builder实现动态列表

页面布局Padding Row Column Flex Expanded组件

Padding

  线性布局（Row和Column）

Row水平布局组件

Column垂直布局组件

弹性布局（Flex Expanded）

通过Row或Column实现弹性布局

 通过Flex实现弹性布局

层叠布局（Stack、Align、Positioned）

Stack组件

Positioned

获取屏幕宽高：

实现一个导航悬浮在列表顶部

Align

 Align结合Stack实现容器里两个组件分别居左居右

页面布局 AspectRatio Card CircleAvatar

AspectRatio

Card

 Card实现一个通讯录/图文的卡片，如下

 CircleAvatar实现圆形图片

Flutter按钮组件

 带图标的按钮

修改按钮的宽高

自适应按钮

圆角按钮

圆形按钮

修改OutlinedButton边框

Wrap组件

完整实现搜索页布局

StatefulWidget有状态组件

 StatefulWidget实现计数器功能

StatefulWidget实现动态列表

Scaffold组件

BottomNavigationBar自定义底部导航

 BottomNavigationBar常用属性

 接下来实现点击对应的Tab页展示对应的组件

type属性

FloatingActionButton组件实现底部导航凸起按钮

Scaffold  floatingActionButtonLocation

Scaffold 左右侧菜单Drawer

DrawerHeader

 UserAccountsDrawHeader

AppBar TabBar TabBarView实现顶部滑动导航

AppBar自定义顶部按钮图标、颜色

 类似头条的Appbar结合TabBar来实现顶部Tab切换

 1、混入SingleTickerProviderStateMixin

 2、定义TabController

3、配置TabBar和TabBarView

​编辑

TabBar属性

 顶部导航bottomNavigationBar与TabBar一起使用

自定义KeepAliveWrapper缓存页面

 顶部导航监听事件

---

Container容器组件

基本的代码结构

import 'package:flutter/material.dart';
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("hello flutter"),
    );
  }
}
 
main() {
  runApp(MaterialApp(
      home: Scaffold( //类型为Widget表示可以是任意组件类型
    appBar: AppBar(
      title: const Text("title!"),
    ),
    body: const MyApp(),
  )));
}

container是容器组件，与html中的div较类似。

Constains不是常量构造函数，所以其外部的const也要都去掉

class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center, //配置container容器内元素的方位
        width: 100,
        height: 100,
        //decoration设置背景
        decoration: const BoxDecoration(
            color: Colors.red), //这里提示要用Decoration类装饰decoration，我们用其子类也是可以的
        child: const Text(
          "hello flutter",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

decoration属性

 

 decoration设置背景，如背景色、背景边框等

decoration: BoxDecoration(//这里提示要用Decoration类装饰decoration，我们用其子类也是可以的
            color: Colors.yellow, 
            border: Border.all(color: Colors.red, width: 5)
            ),

 因为Border.all是个factory构造函数，不是常量的，所以上面的const BoxDecoration需要去掉const

decoration其他属性

borderRadius: BorderRadius.circular(10), //配置圆角，足够大则可以变成圆
            boxShadow: const [    //配置阴影效果
              BoxShadow(color: Colors.blue, blurRadius: 20.0)
            ]

//gradient设置背景颜色渐变，LinearGradient背景线性渐变(下面这个表示红色渐变到黄色)，RadialGradient径向渐变
            gradient:
                const RadialGradient(colors: [Colors.red, Colors.yellow])

通过Container创建一个按钮

class MyButton extends StatelessWidget {
  //自定义一个按钮
  const MyButton({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 40,
      // 设置外边距，上下左右(EdgeInsets.all)都是10，分开设置EdgeInsets.fromLTRB
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Colors.blue,
          // 这里borderRadius提示应用BorderRadiusGeometry修饰，但BorderRadiusGeometry是个抽象类，我们要用其子类来修饰
          // 而BorderRadius是个命名构造函数，不是常量构造函数，外层const应去掉;当然我们也可以用BorderRadius的其他常量构造函数，此时就不用去掉const了，如borderRadius: BorderRadius.all(Radius.circular(10))
          borderRadius: BorderRadius.circular(10)
          ),
      child: const Text(
        "按钮",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}
 
main() {
  runApp(MaterialApp(
      home: Scaffold(
    //类型为Widget表示可以是任意组件类型
    appBar: AppBar(
      title: const Text("title!"),
    ),
    body: Column(
      //通过列加载多个组件
      children: const [MyApp(), MyButton()],
    ),
  )));
}

 padding和maring属性

padding是让容器和里面的元素有相应的间距，margin是容器和容器外部的其他容器有相应的间距

transform属性

让容器旋转等

// 位移，分别向x、y、z位移的距离（在当前位置进行位移）
        transform: Matrix4.translationValues(40, 0, 0), //向右,负数则为向左
 
//旋转
transform: Matrix4.rotationZ(0.2),
 
//缩放
transform: Matrix4.skewY(0.2),

Text组件

 TextStyle参数

class MyText extends StatelessWidget {
  const MyText({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      margin: const EdgeInsets.fromLTRB(0, 60, 0, 0), //设置和上面一个间隔开一些
      decoration: const BoxDecoration(color: Colors.yellow),
      child: const Text(
        "Text组件",
        textAlign: TextAlign.center,  //文字居中显示
      ),
    );
  }
}

        maxLines: 1,    //最多显示一行
        overflow: TextOverflow.ellipsis,  //溢出时显示的内容

图片组件

Flutter中，可以通过Image组件来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络

Image.asset：本地图片

Image.network：远程图片

Image组件常用属性：

 

 其他属性参数：Image class - widgets library - Dart API

基本代码结构

import 'package:flutter/material.dart';
main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("title"),),
      body: const MyApp(),
    )
  ));
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

  Widget build(BuildContext context) {
    return Center(
      // 一般放在容器里面，比较好控制
      child: Container(
        height: 150,
        width: 150,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network("https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"),
      ),
    );
  }

 Image.network的一些属性

src：图片源地址

scale：缩放比例，如2即缩小一倍

alignment：设置位置，默认居中，可以通过Alignment.centerLeft设置靠左 

fit：控制图片的拉伸和挤压，如BoxFit.fill为全图显示，图片会被拉伸充满父容器；BoxFit.cover对图片剪裁并充满容器（图片不变形）；BoxFit.contain全图显示，默认的；BoxFit

Container实现圆形图片

通过container的decoration来实现

class Circular extends StatelessWidget {
  const Circular({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
        // 圆形需要配置成高度的一半
        borderRadius: BorderRadius.circular(75),
        image: const DecorationImage(
          image: NetworkImage("https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"),
          fit: BoxFit.cover
          )
      ),
    );
  }
}

 ClipOval实现圆形图片

class ClipImage extends StatelessWidget {
  const ClipImage({super.key});
  @override
  Widget build(BuildContext context) {
    return ClipOval(  //默认可能会是椭圆，配置一下高宽
      child: Image.network(
        "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}
 
Column(
        children: const [MyApp(), SizedBox(height: 20,), Circular(),SizedBox(height: 20,), ClipImage()],
      )
Scaffold的children中可以加入一个SizeBox区块实现分隔的效果

 加载本地图片

本项目目录下新建一个images文件夹，里面新建两个文件夹：2.0x、3.0x，然后把文件在images及两个文件夹都放一份

接下来修改pubspec.yaml文件

class LocalImage extends StatelessWidget {
  const LocalImage({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.asset("images/a.jpg", fit: BoxFit.cover),
    );
  }
}

 图标组件

MaterialApp的theme，可以设置主题的相关样式，如ThemeData(primarySwatch:Colors.yellow)设置主题为黄色。

基本结构

import 'package:flutter/material.dart';
main(){
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home:Scaffold(
        appBar: AppBar(title: const Text("title"),),
        body: const MyHomePage(),
      )
    );
  }
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return const Text("hello");
  }
}

自带的Icons图标

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        Icon(Icons.home, size: 40, color: Colors.red,)    //定义大小和图标颜色
      ],
    );
  }
}

Materia Design所有图标可以在官网查看：https://material.io/tools/icons/

借助阿里巴巴图标库自定义字体图标

也是自定义字体图标，阿里巴巴图标库（iconfont-阿里巴巴矢量图标库）上右很多字体图标素材

可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，flutter中用ttf格式即可。

在iconfont下载这些图标的代码

1、导入字体图标文件，假设路径为fonts/iconfont.ttf

 2、在pubsepc.yaml中引入我们的图标文件。

在项目根目录下新建一个fonts文件夹，将从iconfont下载的文件中的.json（json不一定要复制，主要是引入的时候需要用到里面的编码）和.ttf文件放到这个目录下

接下来修改pubspec.yaml中的font

配置一个字体如下：

 接下来再lib下新建一个MyFont.dart引入

MyFont.dart中的内容
import 'package:flutter/material.dart';
 
class MyFont{
  static const IconData book = IconData(
    0xf00a1,  //在json文件中每个图标有个unicode编码，再起前面加上0x就是这个参数
    fontFamily: "MyIcon", //pubspec.yaml中font参数的family
    matchTextDirection: true
  );
  static const IconData weixin = IconData(
    0xe8bb,
    fontFamily: "MyIcon",
    matchTextDirection: true
  );
  static const IconData cart = IconData(
    0xf0179,
    fontFamily: "MyIcon",
    matchTextDirection: true
  );
}

main.dart中引用

import './MyFont.dart';
 
Icon(MyFont.book, size: 40,color: Colors.orange,),
SizedBox(height: 20,),
Icon(MyFont.weixin, size: 40,color: Colors.green,),
SizedBox(height: 20,),
Icon(MyFont.cart, size: 40,color: Colors.black,),

多个图标文件加载，同样是将.ttf文件保存到font文件夹下，然后修改pubspec.yaml文件

  fonts:
    - family: MyIcon
      fonts:
        - asset: fonts/iconfont.ttf
    - family: MyIcon1
      fonts:
        - asset: fonts/iconfont1.ttf

接下来一样在lib的MyFont.dart中如上面那样编写，只不过要注意修改fontFamily参数。

ListView列表组件

列表布局是最常用的一种布局方式。flutter中可以通过ListView来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。

列表有以下几种分类：

• 垂直列表
• 垂直图文列表
• 水平列表
• 动态列表

前面用Column的时候如果超出界面范围，下面的就不显示了，我们直接把Column换成ListView即可，此时可以滑动。 

垂直列表

    return ListView(
      children: const [
        ListTile(title: Text("列表"),),
        Divider(),  //横线
        ListTile(title: Text("列表"),),
        Divider(),  //横线
        ListTile(title: Text("列表"),),
        Divider(),  //横线
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
        ListTile(title: Text("列表"),),
      ],
    );

 ListTile（列表项）的一些属性用法：

title：标题

subtitle：副标题

leading：可以在前面加图标或图片

trailing：可以在后面加图标或图片

onTap：配置点击事件

列表项显示图标和分割线
return ListView(
      children: const [
        ListTile(
          leading: Icon(Icons.home),
          title: Text("首页")
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.assignment, color: Colors.red,),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.payment, color: Colors.green,),
          title: Text("待付款"),
        ),
        ListTile(
          leading: Icon(Icons.favorite, color: Colors.lightGreen,),
          title: Text("我的收藏"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.people, color: Colors.black54,),
          title: Text("在线客服"),
          trailing: Icon(Icons.chevron_right_sharp),
        )
      ],
    );

实现图文列表，修改ListTile中的title、leading、subtitle。

return ListView(
      padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),  //设备内部组件边距
      children: [
        ListTile(
          leading: Image.network("https://pic.rmb.bdstatic.com/bjh/news/80f7dbb7d23db98155e168d17521f5ec6303.jpeg"),
          title: const Text("iPhone SE4参数曝光：全面屏设计+A16处理器，起售价3499元起"),
          subtitle: const Text("最近关于iPhone SE4的相关爆料也越来越多,尤其是iPhone14系列爆冷,使得很多喜欢小屏党的用户更加期待iPhone SE4这款机型。"),
        ),
        const Divider(),
        ListTile(  //前后都加图片
          leading: Image.network("https://pic.rmb.bdstatic.com/bjh/news/80f7dbb7d23db98155e168d17521f5ec6303.jpeg"),
          title: const Text("iPhone SE4参数曝光：全面屏设计+A16处理器，起售价3499元起"),
          subtitle: const Text("最近关于iPhone SE4的相关爆料也越来越多,尤其是iPhone14系列爆冷,使得很多喜欢小屏党的用户更加期待iPhone SE4这款机型。"),
          trailing: Image.network("https://pic.rmb.bdstatic.com/bjh/news/dc4994713776e6038b5e79b6646e8c852704.jpeg"),
        )
      ]
    );

 ListView用Widget修饰即可，因此可以用任意的组件。这里我们试试用Image组件

    return ListView(
      padding: const EdgeInsets.all(10),
      children: [
       Image.network("https://pic.rmb.bdstatic.com/bjh/news/80f7dbb7d23db98155e168d17521f5ec6303.jpeg"),
       Container(
        padding: const EdgeInsets.fromLTRB(0, 6, 0, 0),
        height: 44,
        child: const Text("标题1", textAlign: TextAlign.center,style: TextStyle(fontSize: 22),),
       ),
       Image.network("https://pic.rmb.bdstatic.com/bjh/news/80f7dbb7d23db98155e168d17521f5ec6303.jpeg"),
       Image.network("https://pic.rmb.bdstatic.com/bjh/news/dc4994713776e6038b5e79b6646e8c852704.jpeg"),
      ]
    );

水平列表 可左右滑动

 ListView中的container的宽度是自适应的，改了也没有用（对于垂直列表来说）

return ListView(
      scrollDirection: Axis.horizontal, //水平列表 此时只能指定宽度 高度是自适应的
      padding: const EdgeInsets.fromLTRB(0, 6, 0, 0),
      children: [
        Container(
          height: 120,
          width: 120,
          decoration: const BoxDecoration(color: Colors.red),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.orange),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.black),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.blue),
        ),
      ],
    );

如果让高度有效？

在ListView外层加容器去控制高度

return SizedBox(
      height: 120,
      child: ListView(
      scrollDirection: Axis.horizontal, //水平列表 此时只能指定宽度 高度是自适应的
      padding: const EdgeInsets.fromLTRB(0, 6, 0, 0),
      children: [
        Container(
          height: 120,
          width: 120,
          decoration: const BoxDecoration(color: Colors.red),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.orange),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.black),
        ),
        Container(
          height: 120,width: 120,
          decoration: const BoxDecoration(color: Colors.blue),
        ),
      ],
    ),
    );

 动态列表

常量构造函数里面不能执行语句，如果需要在构造函数里面跑语句，把const去掉。

for循环生成列表项

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  List<Widget> _initListData(){
    List<Widget> ls = [];
      for(var i=0; i<20; i++){
        ls.add(ListTile(title: Text("列表 $i"),));
      }
      return ls;
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initListData(),
    );
  }
}
 
因为children需要一个list<Widget>类型，所以我们在外面定义一个方法返回List<Widget>即可
当然这里也可以通过map去遍历
  List<Widget> _initListData(){
    List listdata = [{"a":123, "b":456}, {"a":7, "b":8}];
    var templist = listdata.map((value) {
      return ListTile(
        leading: Image.network(value['a']),
        title: Text(value['b'])
      );
    });
    return templist.toList();
  }

 通过ListView的构造函数builder来生成动态列表

class MyHomePage extends StatelessWidget {
  List<String> ls=[];
  MyHomePage({super.key}){
    for (var i=0; i<20; i++){
      ls.add("第$i条数据");
    }
  }
 
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: ls.length, //遍历的长度
      itemBuilder: (context, index){  //index从0到itemCount
        return ListTile(
          title: Text(ls[index]),
        );
      },
    );
  }
}

GridView网格组件

GridView创建网格列表主要有下面三种方式

1、通过GridView.count实现网格布局

2、通过GridView.extent实现网格布局

3、通过GridView.builder实现动态网格布局

常用属性：

return GridView.count(
      crossAxisCount: 5,  //一行的Widget数量
      children: const [
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
      ],
      );

 

return GridView.extent(
      maxCrossAxisExtent: 200,  //横轴元素最大长度 会自动计算每行能显示多少个去排列
      children: const [
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
        Icon(Icons.pedal_bike),
      ],
      );

GridView.count和GirdView.extent主要区别就是maxCrossAxisExtent和crossAxisCount，其他属性基本一致

GridView.count

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
 
  List<Widget> _initData(){
    List<Widget> tempList = [];
    for (var i=0; i<12; i++){
      tempList.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(color: Colors.blue),
          child: Text("第${i+1}个元素", style: const TextStyle(fontSize: 20),),
        ),
      );
    }
    return tempList;
  }
 
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(10), //配置GridView离四周的间距
      crossAxisCount: 2,  //横轴元素最大长度 会自动计算每行能显示多少个去排列
      crossAxisSpacing: 10,  //配置横轴子元素间距
      mainAxisSpacing: 10, //配置垂直子元素间距
      childAspectRatio: 0.7,  //配置子元素宽高比
      children:  _initData(),
      );
  }
}

 GridView.extend

修改maxCrossAxisExtent参数即可，其他一样  

动态生成

从listData.dart文件中拿数据
listData.dart数据样例
List listData = [
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://www.itying.com/images/flutter/1.png"
  },
  {
    "title": "Childhood",
    "author": "Google",
    "imageUrl": "https://www.itying.com/images/flutter/1.png"
  },
];
 
main.dart
import "listData.dart";
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
 
  List<Widget> _initData(){
    var templist = listData.map((value){
      return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black26)), //设置边框颜色
        child: Column(
          children: [
            Image.network(value["imageUrl"]),
            const SizedBox(height: 10,),
            Text(value["title"], style: const TextStyle(fontSize: 18))
          ],
        ),
      );
    });
    return templist.toList();
  }
 
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(10), //配置GridView离四周的间距
      crossAxisCount: 2,  //横轴元素最大长度 会自动计算每行能显示多少个去排列
      crossAxisSpacing: 10,  //配置横轴子元素间距
      mainAxisSpacing: 10, //配置垂直子元素间距
      childAspectRatio: 1,  //配置子元素宽高比
      children:  _initData(),
      );
  }
}

GridView.builder实现动态列表

查看builder源码可以发现有两个必须参数：gridDelegate、itemBuilder

itemBuilder源码追踪：
required IndexedWidgetBuilder itemBuilder,
|
typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);
因此需要一个方法修饰
itemBuilder: (context, index){
 
      },

gridDelegate源码追踪
 
required this.gridDelegate,
|
  final SliverGridDelegate gridDelegate 因此需要SliverGridDelegate类
 
abstract class SliverGridDelegate {    而这个类是个抽象类，我们应该用非抽象的子类
 
class SliverGridDelegateWithFixedCrossAxisCount extends SliverGridDelegate {
class SliverGridDelegateWithMaxCrossAxisExtent extends SliverGridDelegate {
 
这两个都是SliverGridDelegate 的非抽象子类。
一个就是GridView.count的实现 一个是.extend的实现

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home:Scaffold(
        appBar: AppBar(title: const Text("title"),),
        body: const MyHomePage(),
      )
    );
  }
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  Widget _initData(context, index){
      return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black26)), //设置边框颜色
        child: Column(
          children: [
            Image.network(listData[index]["imageUrl"]),
            const SizedBox(height: 10,),
            Text(listData[index]["title"], style: const TextStyle(fontSize: 18))
          ],
        ),
      );
 
  }
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(10), //配置GridView离四周的间距
      itemCount: listData.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1
      ),
      itemBuilder: _initData
      );
  }
}

 gridDelegate用SliverGridDelegateWithMaxCrossAxisExtent 修饰也类似Grid.extend，这是需要用maxCrossAxisExtent修饰即可。

如果出现上面右边图这种场景，可能是溢出了，这时候可以设置宽高比来调整，后续则通过程序来设置。

页面布局Padding Row Column Flex Expanded组件

Padding

让里面的元素和上下左右有间距

Padding功能更单一，比Container组件占用内存更小，因为可以简单功能实现周围间距，可以考虑用Padding而不是创建Container然后设置其padding属性。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(20),
      child: Text("你好flutter"), 
      );
  }
}

  线性布局（Row和Column）

 自定义图表类实现一个红色背景的图标

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return IconContainer(Icons.home, color: Colors.red);
  }
}
//自定义一个IconContainer,可以传入color和icon实现不同IconContainer
class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  /*
  this.icon就相当于正常的构造函数使用this.icon=icon一样
  */
  IconContainer(this.icon, {Key? key, required this.color}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 120,
      width: 120,
      color: color,
      child: Icon(icon, color: Colors.white, size:28),
    );
  }
}

Row水平布局组件

 在上面自定义图标容器类上实现Row

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconContainer(Icons.home, color: Colors.yellow),
        IconContainer(Icons.search, color: Colors.red),
        IconContainer(Icons.ac_unit_sharp, color: Colors.orange),
      ],
    );
  }
}

mainAxisAlignment: MainAxisAlignment.center,设置居中显示

MainAxisAlignment.spaceBetween设置元素中间有间隔，与两边无间隔

还有spaceAround、spaceEvenly、end等其他可选

 crossAxisAlignment设置次轴的排序方式（相对于外层容器）

如果没有Container包围此时单独设置crossAxisAlignment是没有效果的。

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 700,
      color: Colors.black12,
      child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        IconContainer(Icons.home, color: Colors.yellow),
        IconContainer(Icons.search, color: Colors.red),
        IconContainer(Icons.ac_unit_sharp, color: Colors.orange),
      ],
    ),
    );
  }

 

 如何充满整个屏幕，此时需要把外层Container的宽高设置的足够大，当超过屏幕大小时，Container的宽高就是当前屏幕宽高

 return Container(
      width: double.infinity,
      height: double.infinity,}

double.infinity和double.maxFinite都可以让当前元素的width/height达到父元素的尺寸

Column垂直布局组件

 与Row相反，此时主轴是纵轴，次轴是横轴

弹性布局（Flex Expanded）

Flex组件可以沿水平或垂直方向排列子组件，Row和Column都继承自Flex，参数基本相同，能试用Flex 的地方基本都可以用用Row或Column。Flex本身功能强大，可以和Expanded组件实现弹性布局。（Row或Column也可以和Expanded配合实现弹性布局）

通过Row或Column实现弹性布局

@override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,  //左边占一块
          child: IconContainer(Icons.home, color: Colors.yellow), //此时该元素设置宽度是无效的
        ),
        Expanded(
          flex: 2,  //左边占一块
          child: IconContainer(Icons.search, color: Colors.red), //此时该元素设置宽度是无效的
        ),
        Expanded(
          flex: 3,  //左边占一块
          child: IconContainer(Icons.ac_unit_sharp, color: Colors.orange), //此时该元素设置宽度是无效的
        ),
      ],
    );
  }

 通过Flex实现弹性布局

需要设置direction属性来设置是水平还是垂直排列

@override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.vertical,
      children: [
        Expanded(
          flex: 1,  //左边占一块
          child: IconContainer(Icons.home, color: Colors.yellow), //此时该元素设置宽度是无效的
        ),
        Expanded(
          flex: 2,  //左边占一块
          child: IconContainer(Icons.search, color: Colors.red), //此时该元素设置宽度是无效的
        ),
        Expanded(
          flex: 3,  //左边占一块
          child: IconContainer(Icons.ac_unit_sharp, color: Colors.orange), //此时该元素设置宽度是无效的
        ),
      ],
    );
  }

左边自适应，右边固定：children中固定宽度的组件就不用Expanded嵌套即可

  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          width: double.infinity, //填充满行
          height: 200,
          color: Colors.black,
        ),
        Row(
          children: [
            SizedBox(
              height: 180,
              child: Expanded(
              flex: 2,
              child: Image.network("https://www.itying.com/images/flutter/2.png", fit: BoxFit.cover)
              ),
            ),
            SizedBox(
              height: 180,
              child:Expanded(
              flex: 1,
              child: Column(
                children: [
                  Expanded(
                    flex: 1,
                  child: Image.network("https://www.itying.com/images/flutter/3.png", fit: BoxFit.cover)
                          ),
                  Expanded(
                    flex: 1,
                  child: Image.network("https://www.itying.com/images/flutter/4.png", fit: BoxFit.cover)
                          ), 
                ],),),) ],)],);
  }

实现这个效果，首先用个ListView实现列表项，其子元素第一行是个黑色的容器、第二个元素是个Row并实现自适应，左边占两块，右边占一块，右边又有两部分构成，通过Column实现自适应，上下各占一块。为了实现第二行固定高度，我们通过SizedBox对第二行进行嵌套

这里第二行右边两个图片没有占满一行，我们也可以对这两个Image在外层加一个父组件SizedBox，设置width=double.infinity来占满整行

层叠布局（Stack、Align、Positioned）

Stack组件

表示堆的意思，可以用Stack或者Stack结合Align或者Stack结合Positioned来实现页面的定位布局

基础的main.dart模板

import 'package:flutter/material.dart';
 
void main(List<String> args) {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
        ),
        body: const HomePage(),
      ),
    );
  }
}
 
class HomePage extends StatelessWidget {
  const HomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const Text("Hello Flutter!");
  }
}

Stack可以使多个元素堆在在一起

Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(height: 400, width: 300, color: Colors.red,),
        Container(height: 200, width: 200, color: Colors.yellow,),
        const Text("你好ss flutter")
      ],
    );
  }

通过设置Stack的alignment元素可以设置子元素的排列，如居中：

alignment: Alignment.center,  效果如上面右图（可以发现第一个元素并没有居中）

Stack是相对于父容器定位的，如果没有父容器，就相对于整个屏幕定位。

Positioned

使用Positioned必须设置width和height表示子组件的高宽，否则会报错

 

 Stack结合Positioned控制子元素的显示位置

return Container(
        height: 400,
        width: 300,
        color: Colors.red,
        child: Stack(
          children: [
            Positioned(
                left: 0,
                bottom: 0, //居于最外层Container左侧和底部0
                child:
                    Container(height: 100, width: 100, color: Colors.yellow)),
            const Positioned(
                right: 0,
                top: 190, //居于右侧中间
                child: Text("hello flutter"))
          ],
        ));

     

获取屏幕宽高：

final size = MediaQuery.of(context).size;

size.width 或size.height即可获取

实现一个导航悬浮在列表顶部

如上面右图

Widget build(BuildContext context) {
    // 获取屏幕宽高
    final size = MediaQuery.of(context).size;
    return Stack(
      children: [
        ListView(
          padding: const EdgeInsets.only(top: 50),  //距离顶部一定距离，从而不会遮挡第一个元素
          children: const [
            ListTile(title: Text("列表1"),),
            ListTile(title: Text("列表2"),),
            ListTile(title: Text("列表"),),
            ListTile(title: Text("列表"),),
            ListTile(title: Text("列表"),),
            ListTile(title: Text("列表"),),
            ListTile(title: Text("列表"),),
            ListTile(title: Text("列表"),),
          ],
        ),
        Positioned(
            left: 0,
            top: 0,    //设置在顶部 也可以用bottom设置在底部
            width: size.width,
            height: 44,
            child: Container(
              alignment: Alignment.center,
              height: 44,
              color: Colors.black,
              child: const Text("二级导航", style: TextStyle(color: Colors.white)),
            ))
      ],
    );
  }

Align

Align组件可以调整子组件的位置，Stack组件中结合Align组件可以控制每个子元素的显示位置

 例如下面这三段代码实现的是同样的效果，均是实现一个子元素在父元素居中显示。

  

Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      alignment: Alignment.center,
      child: const Text("你好 flutter"),
    );
 
Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: const Align(
        alignment: Alignment.center,
        child: Text("你好 flutter"),
      ),
    );
  }
 
Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: const Center(
        child: Text("你好 flutter"),
      ),
    );
  }

Alignment也可以使用构造函数const Alignment(this.x, this.y)来定位

 Align结合Stack实现容器里两个组件分别居左居右

首先我们会先想到用Row来实现, 结果是不行的，会挤在一起

return Row(
      children: const [
        Align(
          alignment: Alignment.topLeft,
          child: Text("收藏"),
        ),
        Align(
          alignment: Alignment.topRight,
          child: Text("购买"),
        ),
      ],
    );

只需要将Row改成Stack即可。

接下来通过Column来实现，如果不在外面加容器Container，直接用Column是相对屏幕布局（Column并不知道容器宽高），因此我们在Stack外加个Container，并设置宽高

Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 40,
          child: Stack(
            children: const [
              Positioned(child: Text("收藏"), left: 10,),
              Positioned(child: Text("购买"), right: 10,)
            ],
          ),
        )
      ],
    );
  }

页面布局 AspectRatio Card CircleAvatar

AspectRatio

 页面上显示一个容器 宽高是屏幕的宽度 高度是容器宽度的一半

return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(
        color: Colors.red,
      ),
    );

Card

 Card实现一个通讯录/图文的卡片，如下

 vscode 保存时会自动格式化代码，可以修改settings.json中"editor.formatOnSave": false 即可。

最简单版本的卡片

return ListView(
      children: [
        Card(
          child: Column(
            children: const [
              ListTile(title: Text("张三", style: TextStyle(fontSize: 28),),subtitle: Text("高级软件工程师")),
              Divider(),
              ListTile(title: Text("电话：123456789",)),
              ListTile(title: Text("地址：北京市海淀区",)),
            ],
          )),
          Card(
          child: Column(
            children: const [
              ListTile(title: Text("张三", style: TextStyle(fontSize: 28),),subtitle: Text("高级软件工程师")),
              Divider(),
              ListTile(title: Text("电话：123456789",)),
              ListTile(title: Text("地址：北京市海淀区",)),
            ],
          ))
      ],
    );

   

 接下来配置阴影的深度, elevation: 10, color则配置卡片背景颜色

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), 可以配置阴影效果 如圆角。 margin可以配置外边距，shadowColor设置阴影颜色。

Card(
          elevation: 10,
          margin: const EdgeInsets.all(10),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: Column(
            children: const [
              ListTile(title: Text("张三", style: TextStyle(fontSize: 28),),subtitle: Text("高级软件工程师")),
              Divider(),
              ListTile(title: Text("电话：123456789",)),
              ListTile(title: Text("地址：北京市海淀区",)),
            ],
          )),

实现图文卡片

Widget build(BuildContext context) {
    return ListView(        //ListView设置的列表项可以滑动
      children: [
        Card(
          shape: RoundedRectangleBorder(    //实现圆角阴影
            borderRadius: BorderRadius.circular(20)
          ),
          margin: const EdgeInsets.all(10),    //设置一些外边距
          child: Column(        //通过列元素来实现
            children: [        
              AspectRatio(        //列元素第一个行就是一个大图片，AspectRatio可以设置子元素的宽高比
                aspectRatio: 16/9,        //设置图片宽高比
                child: Image.network("https://www.itying.com/images/flutter/3.png", fit: BoxFit.cover,),
              ),
              ListTile(        // 列元素第一行通过ListTile实现，包括主副标题以及左边的图片
                leading: ClipOval(
                  child: Image.network("https://www.itying.com/images/flutter/3.png", fit: BoxFit.cover,height: 40,width: 40,),
                ),
                title: const Text("title"),
                subtitle: const Text("sub title"),
              )
            ],
          ),
        ),
      ],
    );
  }

   

这里我们使用ClipOval实现圆形图片，也可以用CircleAvatar实现圆形图片

CircleAvatar(
                  radius: 200,
                  backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
                ),

 CircleAvatar实现圆形图片

效果如上面右图

Widget build(BuildContext context) {
    return const CircleAvatar(
      radius: 110,
      backgroundColor: Color(0xffFDCF09),
      child: CircleAvatar(
        radius: 100,
        backgroundImage:
            NetworkImage("https://www.itying.com/images/flutter/3.png"),
      ),
    );
  }

接下来通过数据动态生成Card

import "./res/listdata.dart";
class HomePage extends StatelessWidget {
  const HomePage({super.key});
 
  List<Widget> _initCardData() {
    var tempList = listData.map((value) {
      return Card(
        shape: RoundedRectangleBorder(
            //实现圆角阴影
            borderRadius: BorderRadius.circular(20)),
        margin: const EdgeInsets.all(10), //设置一些外边距
        child: Column(
          //通过列元素来实现
          children: [
            AspectRatio(
              //列元素第一个行就是一个大图片，AspectRatio可以设置子元素的宽高比
              aspectRatio: 16 / 9, //设置图片宽高比
              child: Image.network(
                value["imageUrl"],
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              // 列元素第一行通过ListTile实现，包括主副标题以及左边的图片
              leading: ClipOval(
                child: Image.network(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                  height: 40,
                  width: 40,
                ),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            )
          ],
        ),
      );
    });
 
    return tempList.toList();
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initCardData(),
    );
  }
}

Flutter按钮组件

按钮组件的属性

 ButtonStyle里面的常用参数

Widget build(BuildContext context) {
    return ListView(children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //居中
        children: [
          ElevatedButton(
              onPressed: () { //设置点击时的回调函数
                print("ElevatedButton");
              },
              child: const Text("普通按钮")),
          TextButton(onPressed: () {}, child: const Text("文本按钮")),
          const OutlinedButton(onPressed: null, child: Text("带边框的按钮")),
          IconButton(onPressed: (){}, icon: const Icon(Icons.thumb_up)) //图标按钮,
          
        ],
      )
    ]);
  }

  

 带图标的按钮

ElevatedButton、TextButton、OutlinedButton都有一个icon构造函数，通过这个可以创建带图标的按钮（如上面右图）

Row(
        children: [
          ElevatedButton.icon(onPressed: (){}, icon:const Icon(Icons.send), label:const Text("发送")),
          TextButton.icon(onPressed: null, icon: const Icon(Icons.info), label: const Text("消息")),
          OutlinedButton.icon(onPressed: null, icon: const Icon(Icons.add), label: const Text("增加"))
        ],
      )

修改按钮的背景颜色已经文字颜色，通过style参数来设置

ElevatedButton(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.red),   //背景颜色
          foregroundColor: MaterialStateProperty.all(Colors.black)  //文字和图标的颜色
        ),
        onPressed: () {}, child: const Text("修改颜色")
      ),

修改按钮的宽高

可以发现ElevatedButton组件里面并没有设置宽高的参数，因此我们需要在ElevatedButton外层加一个SizedBox或者Container来控制宽高

SizedBox(
        height: 80,
        width: 200,
        child: ElevatedButton(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.red),   //背景颜色
          foregroundColor: MaterialStateProperty.all(Colors.black)  //文字和图标的颜色
        ),
        onPressed: () {}, child: const Text("设置宽高")
      ),
      )

自适应按钮

在外层嵌套一个Expanded

Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(child: Container(
            height: 60,
            margin: const EdgeInsets.all(10), //通过设置外边距实现
            child: ElevatedButton(
              child: const Text("自适应按钮"),
              onPressed: () {},
            ),
          ))
        ],
      )

圆角按钮

ElevatedButton style中的shape来设置圆角

ElevatedButton(
              child: const Text("自适应按钮"),
              onPressed: () {},
                //设置圆角效果
              style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)))),
            ),

圆形按钮

同样设置ElevatedButton style中的shape

ElevatedButton(
              child: const Text("自适应按钮"),
              onPressed: () {},
              style: ButtonStyle(shape: MaterialStateProperty.all(CircleBorder(side: BorderSide(color: Colors.yellow)))),
            ),

修改OutlinedButton边框

这个按钮组件默认有边框，不带阴影且背景透明。按下后，边框颜色会变亮，同时出现背景和阴影。

Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          OutlinedButton(
            style: ButtonStyle(
            //设置边框粗细以及边框颜色
              side: MaterialStateProperty.all(const BorderSide(width: 1, color: Colors.red))
            ),
            onPressed: (){}, child: const Text("边框按钮")
            )
        ],
      )

Wrap组件

Wrap可以实现流布局，单行的Wrap跟Row几乎一致，单列的Wrap则跟Row几乎一致。但Row与Column都是单行单列，Wrap突破了这个限制，mainAxis上空间不足时，则向crossAxis上扩展显示。

例如实现下面的效果：

 

最简单的Wrap效果，如上面右图

class HomePage extends StatelessWidget {
  const HomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Button("test1", onPressed: () {}),
        Button("test2", onPressed: () {}),
        Button("test3", onPressed: () {}),
        Button("test4", onPressed: () {}),
        Button("test5", onPressed: () {}),
        Button("test6", onPressed: () {}),
        Button("test7", onPressed: () {}),
        Button("test8", onPressed: () {}),
        Button("test9", onPressed: () {}),
      ],
    );
  }
}
 
class Button extends StatelessWidget {
  String text; //按钮文字
  void Function()? onPressed; //按钮回调函数
  Button(this.text, {super.key, required this.onPressed});
 
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all(Colors.black45),
            backgroundColor:
                MaterialStateProperty.all(Color.fromARGB(240, 202, 199, 199))),
        onPressed: onPressed,
        child: Text(text));
  }
}

 spacing 设置在主轴(x轴/横轴)上的间距；

runSpacing：设置在y轴 纵轴上的间距

如果要设置外边距 可以在Wrap外面嵌套一个Padding组件。

direction：设置主轴方向（默认是横轴），使用Axis.vertical可以改成纵轴为主轴；

alignment：设置对其方式，如居中 居左等；

完整实现搜索页布局

class HomePage extends StatelessWidget {
  const HomePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(10),
      children: [
        Row(
          children: [
            Text("热搜", style: Theme.of(context).textTheme.titleLarge,)
          ],
        ),
        const Divider(),
        Wrap(
          spacing: 10,
          runSpacing: 10,
          children: [
            Button("test1", onPressed: () {}),
            Button("test2", onPressed: () {}),
            Button("test3", onPressed: () {}),
            Button("test4", onPressed: () {}),
            Button("test5", onPressed: () {}),
            Button("test6", onPressed: () {}),
          ],
        ),
      const SizedBox(height: 10,),
      Row(
          children: [
            Text("历史记录", style: Theme.of(context).textTheme.titleLarge,)
          ],
        ),
      Column(
        children: const [
          ListTile(title: Text("服装"),),
          Divider(),
          ListTile(title: Text("手机"),),
          Divider(),
          ListTile(title: Text("电脑"),),
        ],
      ),
      Padding(
        padding: const EdgeInsets.all(40),
        child: OutlinedButton.icon(
          style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all(Colors.black45)
          ),
          onPressed: (){}, icon: const Icon(Icons.delete), label: const Text("清空记录")
          ),
      ),
      ],
      
    );
  }
}
 
class Button extends StatelessWidget {
  String text; //按钮文字
  void Function()? onPressed; //按钮回调函数
  Button(this.text, {super.key, required this.onPressed});
 
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all(Colors.black45),
            backgroundColor:
                MaterialStateProperty.all(Color.fromARGB(240, 202, 199, 199))),
        onPressed: onPressed,
        child: Text(text));
  }
}

StatefulWidget有状态组件

 StatefulWidget实现计数器功能

首先我们用传统的StatelessWidget 来实现这个功能

import "./res/listdata.dart";
 
import 'package:flutter/material.dart';
 
void main(List<String> args) {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
        ),
        body: HomePage(),
      ),
    );
  }
}
 
class HomePage extends StatelessWidget {
  int countNum = 0;    //定义变量
  HomePage({super.key});    //构造函数此时也不是常量的了
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "$countNum",
            style: Theme.of(context).textTheme.headline1,
          ),
          const SizedBox(
            height: 100,
          ),
          ElevatedButton(
              onPressed: () {
                countNum++;
                print(countNum);
              },
              child: const Text("增加"))
        ],
      ),
    );
  }
}

  

 可以发现 虽然点击按钮countNum会增加，但是页面上并不会变化，永远显示的是最开始的0.

接下来用StatefulWidget来实现：

StatefulWidget（抽象类）里有一个createState抽象方法，因此要继承抽象类就必须实现其中的抽象方法。

createState返回State对象，因此我们还需要有一个类实现State类。

基本的结构

class HomePage extends StatefulWidget {
  const HomePage({super.key});
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

接下来在_HomePageState的build方法实现这个功能

class _HomePageState extends State<HomePage> {
  int numCount = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "$numCount",
            style: Theme.of(context).textTheme.headline2,
          ),
          const SizedBox(
            height: 60,
          ),
          ElevatedButton(
              onPressed: () {
                setState(() {    //这个只能在StatefulWidget使用，StatelessWidget是没有的
                  numCount++;
                  print(numCount);
                });
              },
              child: const Text("增加"))
        ],
      ),
    );
  }
}

 可以发现每次点击都走了一次build()

Scaffold有一个floatingActionButton属性 可以在右下角设置一个浮动的按钮，我们通过这个也能实现增加的功能

StatefulWidget实现动态列表

基本结构

import "./res/listdata.dart";
 
import 'package:flutter/material.dart';
 
void main(List<String> args) {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const HomePage());
  }
}

    

final定于的List，在运行时可以多次add 往里面添加元素。

class HomePage extends StatefulWidget {
  const HomePage({super.key});
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  List<String> list = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            // 改变数据必须在setState中
            setState(() {
              list.add("新增的列表");
            });
          },
        ),
        body: ListView(
          //遍历数据生成ListTile
            children: list.map((value) {
          return ListTile(
            title: Text(value),
          );
        }).toList()));
  }
}

Scaffold组件

BottomNavigationBar自定义底部导航

 BottomNavigationBar常用属性

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
          appBar: AppBar(title: const Text("Flutter"),),
          body: const Text("Flutter1"),
          bottomNavigationBar: BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
            ],
          ),
        )
    );
  }
}

   

currentIndex索引从0开始

iconSize:设置底部菜单大小

fixedColor：设置底部菜单选中时的颜色

onTap：（传入的参数value是当前选中的Tab页的索引）

onTap: (value) {print(value);},

因此要实现点击Tab项，切换到对应的Tab页，我们需要设置变量，onTap回调函数中设置currentIndex。（需要在StatefulWidget实现，它才是有状态的）

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const Tabs());
  }
}
 
class Tabs extends StatefulWidget {
  const Tabs({super.key});
 
  @override
  State<Tabs> createState() => _TabsState();
}
 
class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter"),
      ),
      body: const Text("Flutter1"),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
          print(value);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ],
      ),
    );
  }
}

  

 接下来实现点击对应的Tab页展示对应的组件

 在lib新建文件夹pages，在pages中新建一个tabs文件夹，tabs中对应三个Tab页建立category.dart、home.dart、setting.dart三个文件。

目录结构

   

 main.dart

import 'package:flutter/material.dart';
import './pages/tabs.dart';
 
void main(List<String> args) {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const Tabs());
  }
}

tabs.dart

import 'package:flutter/material.dart';
import './tabs/category.dart';
import './tabs/home.dart';
import './tabs/setting.dart';
 
class Tabs extends StatefulWidget {
  const Tabs({super.key});
 
  @override
  State<Tabs> createState() => _TabsState();
}
 
class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [HomePage(), CategoryPage(), SettingPage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter"),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
          print(value);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ],
      ),
    );
  }
}

home.dart/category.dart/setting.dart

import 'package:flutter/material.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({super.key});
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("首页"),
    );
  }
}

type属性

当配置三个以上菜单时，需要设置type，否则会有菜单被挤掉

设置为type: BottomNavigationBarType.fixed

FloatingActionButton组件实现底部导航凸起按钮

设置Scaffold的floatingActionButton属性。

 

 基本代码与前面一直，加多了两个tab

FloatingActionButton可实现浮动按钮，常用属性如下：

简单设置，这个浮动按钮会在底部右侧：

 

我们需要将他放到消息这个tab中间。

Scaffold  floatingActionButtonLocation

接下来通过设置Scaffold的floatingActionButtonLocation属性可以设置这个按钮在哪个位置，如设置floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked 可以在底部中间。

要设置这个悬浮按钮的大小，我们需要在外层用一个Container，因为 FloatingActionButton无法指定宽高。

并且点击这个按钮还可以跳转到消息页面

tabs.dart

import 'package:flutter/material.dart';
import './tabs/category.dart';
import './tabs/home.dart';
import './tabs/setting.dart';
import './tabs/message.dart';
import './tabs/user.dart';
 
class Tabs extends StatefulWidget {
  const Tabs({super.key});
 
  @override
  State<Tabs> createState() => _TabsState();
}
 
class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    UserPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: (value) {
            setState(() {
              _currentIndex = value;
            });
            print(value);
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: "用户")
          ],
        ),
        floatingActionButton: Container(
          height: 60,
          width: 60,
          
          padding: const EdgeInsets.all(2),
          margin: const EdgeInsets.only(top: 6),
          decoration: BoxDecoration(
              color: Colors.yellow, borderRadius: BorderRadius.circular(30)),
          child: FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
            },
          ),
        ),
        floatingActionButtonLocation:
            FloatingActionButtonLocation.centerDocked);
  }
}

也可以设置点击悬浮按钮时修改背景颜色。

FloatingActionButton有个backgroundColor属性就用于设置按钮背景颜色

backgroundColor: _currentIndex==2? Colors.red: Colors.blue,

Scaffold 左右侧菜单Drawer

 可以发现左右出现了按钮 点击就可以弹出左右的菜单栏，也可以通过滑动引出。

DrawerHeader

 在Drawer的child元素中可以添加一个Column，里面的chidren设置DrawerHeader就可以设置左右侧菜单栏的头部了。

 UserAccountsDrawHeader

 使用内置的UserAccountsDrawHeader组件快速实现左侧菜单栏头部用户信息的效果

 

AppBar TabBar TabBarView实现顶部滑动导航

AppBar自定义顶部按钮图标、颜色

 首先在顶部左侧加一个按钮，通过leading来设置；

设置actions来在AppBar的右边加一些图标或者按钮；

 

 实现后右上角有一个debug图标，我们通过MaterialApp去掉这个图标

 类似头条的Appbar结合TabBar来实现顶部Tab切换

 1、混入SingleTickerProviderStateMixin

 2、定义TabController

3、配置TabBar和TabBarView

TabBar中的tabs与TabBarView中children的元素一一对应，点击tab的哪一个就对显示tabBarView中的哪一个。

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  //生命周期函数:当组件初始化时会触发
  @override
  void initState() {
    super.initState();
//length为tab的数量
    _tabController = TabController(length: 3, vsync: this);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: const Text("Flutter App!"),
        leading: IconButton(
            onPressed: (() {
              print("左侧按钮图标!");
            }),
            icon: const Icon(Icons.menu)),
        actions: [
          IconButton(
              onPressed: (() {
                print("右侧搜索图标!");
              }),
              icon: const Icon(Icons.search)),
          IconButton(
              onPressed: (() {
                print("更多");
              }),
              icon: const Icon(Icons.more_horiz)),
        ],
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(child: Text("关注"),),
            Tab(child: Text("热门"),),
            Tab(child: Text("视频"),),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
        ListView(
          children: const[
            ListTile(title: Text("关注列表"),),
          ],
        ),
        ListView(
          children: const[
            ListTile(title: Text("热门列表"),),
          ],
        ),
        ListView(
          children: const[
            ListTile(title: Text("视频列表"),),
          ],
        )
      ]
      
      )
    );
  }
}

TabBar属性

 顶部导航bottomNavigationBar与TabBar一起使用

在底部导航的各个tab中都加上Scaffold并且实现tabbar，相当于Scaffold中嵌套Scaffold

home.dart

import 'package:flutter/material.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({super.key});
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40), //配置AppBar的高度，改成40之后可能会太小 导致底部指示器被盖住,可以在AppBar外层在设置一个Container,指定一个更小的高度，从而让指示器显示出来.
        child: AppBar(
          elevation: 1, //设置阴影
          backgroundColor: Colors.white,  //设置Appbar背景颜色
 
        title: TabBar(
          isScrollable: true,
          indicatorColor: Colors.red, //设置底部指示器颜色
          unselectedLabelColor: Colors.black, //label未选中时的颜色
          labelColor: Colors.red,
          indicatorSize: TabBarIndicatorSize.label, //底部指示器的宽度=label宽度
          controller: _tabController,
          tabs: const [
            Tab(child: Text("关注"),),
            Tab(child: Text("热门"),),
            Tab(child: Text("热门"),),
          ],
        ),
      ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Text("关注"),
          Text("热门"),
          Text("热门"),
        ],
      ),
    );
  }
}

自定义KeepAliveWrapper缓存页面

比如从一个tab切换到另一个tab，不使用状态保存的话切换回去会从最开始的地方展示；而保存状态的话即使切换回去也是从之前的地方开始展示。

KeepAliveWrapper.dart

import 'package:flutter/material.dart';
 
class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper(
      {super.key, required this.child, this.keepAlive = true});
 
  final Widget? child;
  final bool keepAlive;
  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}
 
class _KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return widget.child!;
  }
 
  @override
  bool get wantKeepAlive => widget.keepAlive;
  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if (oldWidget.keepAlive != widget.keepAlive) {
      //keepAlive状态需要更新,实现在AutomaticKeepAliveClientMixin中
      updateKeepAlive();
    }
    super.didUpdateWidget(oldWidget);
  }
}

使用，如home.dart中

import '../../tools/keepAliveWrapper.dart';
只需在需要保存状态的组件外层调用一个KeepAliveWrapper

 顶部导航监听事件

在initState函数中监听tab改变事件，此处既能监听点击也能监听滑动事件

这里要注意一下_tabController.animation是可空类型，因此我们需要用可空断言 !.

 或者再TabBar中也可以通过onTap设置监听函数（只能监听点击事件，不能监听滑动事件）

 能获取到索引就能动态变化数据了。

  @override
  void dispose() {
    // 销毁_tabController
    super.dispose();
    _tabController.dispose();
  }