Flutter文档

想要屑狐狸
224 阅读10分钟

lib-main.dart

内容居中-文字排版(左-右;右-左)-字体颜色-字体大小

import 'package:flutter/material.dart';//必须引入这个继承库 importM

void main() {
  //入口方法
  runApp(const Center(
    //Center--让内容居中
    child: Text("你好Flutter",
        textDirection: TextDirection.ltr, //ltr--文字从左向右;rtl--文字从右向左
        style: TextStyle(
          // color: Colors.red,---颜色
          color: Color.fromRGBO(244, 244, 123, 1),//颜色
          fontSize: 40,//字体大小
        )),
  ));
}

MaterialApp和Scaffold两个组件装饰App

// import 'package:flutter/material.dart';//必须引入这个继承库 importM---20
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    //MaterialApp根组件,包含了home组件,
    home: Scaffold(
      appBar: AppBar(
          title: const Text(
              "你好Flutter")), //appBar配置顶部导航--因为title是Widget类型所以加上Text()
      body: const Center(
        //body放置内容区
        child: Text("你好Flutter",
            textDirection: TextDirection.ltr,
            style: TextStyle(
              // color: Colors.red,---颜色
              color: Color.fromRGBO(51, 185, 208, 1), //颜色
              fontSize: 40, //字体大小
            )),
      ),
    ),
  ));
}

对body内容抽离

StatelessWidget-无状态组件,状态不可变的widget

StatefulWidget-有状态组件,持有的状态可能在widget生命周期改变

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

调用

生成自定义组件快捷键--statelessW--回车

//importM---20
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(

    home: Scaffold(
      appBar: AppBar(
          title: const Text(
              "你好Flutter")),
      body: const MyApp(),//----------------------------------------在这里调用
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      //body放置内容区
      child: Text("你好Flutter",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            // color: Colors.red,---颜色
            color: Color.fromRGBO(51, 185, 208, 1), //颜色
            fontSize: 40, //字体大小
          )),
    );
  }
}

Container容器组件--类似Div

image.png

import 'package:flutter/material.dart';

void main() {
  runApp(
      //传入Flutter内置或自定义组件,建议用MaterialApp()包裹
      MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text("导航栏"),
        ), //顶部导航
        body: const MyApp() //内容
        ),
  ));
}

class MyApp extends StatelessWidget {
  //MyApp继承自StatelessWidget完成他的抽象类build
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center, //配置Container容器内元素的方位
        width: 300,
        height: 200,
        decoration: BoxDecoration(
            color: Colors.red, //容器内背景颜色--设置了径向渐变就不生效了
            border: Border.all(color: Colors.blue, width: 2), //配置边框
            borderRadius: BorderRadius.circular(100), //圆角
            boxShadow: const [
              //阴影
              BoxShadow(
                  color: Colors.blue, //颜色
                  offset: Offset(20, 20), //位置
                  blurRadius: 10 //高度
                  ) //BoxShadow
            ],
            gradient: const LinearGradient(
              //线性渐变  RadialGradient //径向渐变
              colors: [Colors.red, Colors.orange],
            ) //LinearGradient
            ), //BoxDecoration
        child: const Text(
          "你好Flutter",
          style: TextStyle(color: Colors.amber),
        ), //Text
      ), //Container
    ); //Center
  }
}

引用多个组件 button按钮 多个组件之间的间距 transfrom旋转MyApp

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text("导航栏"),
        ),
        body: const Column(
          //想要一次性调用多个组件需要用到Column
          children: [MyApp(), MyButton()],
        )),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      // transform: Matrix4.translationValues(50, 0, 0), //位移
      // transform: Matrix4.rotationZ(0.2), //旋转--0.2圈
      transform: Matrix4.skewY(0.2), //倾斜
      margin: const EdgeInsets.all(20),
      alignment: Alignment.center,
      width: 300,
      height: 200,
      decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(20)),
    ));
  }
}

class MyButton extends StatelessWidget {
  //创建按钮组件
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, //文字居中
      width: 200,
      height: 40,
      //margin: const EdgeInsets.all(10), //上下左右都有10的边距
      margin: const EdgeInsets.fromLTRB(
          0, 20, 0, 0), //fromLTRB(left, top, right, bottom)
      decoration: BoxDecoration(
          color: Colors.blue, borderRadius: BorderRadius.circular(10)),
      child: const Text(
        "按钮",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}

Text组件

image.png

TextStyle

image.png

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text("导航栏"),
        ),
        body: const Column(
          //想要一次性调用多个组件需要用到Column
          children: [MyText()],
        )),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      width: 200,
      height: 200,
      margin: const EdgeInsets.fromLTRB(0, 40, 0, 0),
      decoration: const BoxDecoration(color: Colors.blue),
      child: const Text(
        "你好我是Fluteer你好我是Fluteer你好我是Fluteer你好我是Fluteer你好我是Fluteer你好我是Fluteer你好我是Fluteer", //文字过多 会挤下来  --使用maxLines设置最大行数
        textAlign: TextAlign.left,
        maxLines: 1, //设置最大行数
        overflow: TextOverflow.ellipsis, //文字溢出使用ellipsis显示省略号
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w700, //字体粗细
          color: Colors.red,
          fontStyle: FontStyle.italic, //文字倾斜
          letterSpacing: 2, //字间距
        ),
      ),
    ));
  }
}

图片组件介绍

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

这里主要讲两个

Image.asset -----本地图片

Image.network -----远程图片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(
      title: const Text("你好Flutter"),
    ),
    body: const MyApp(),
  )));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
          // scale: 2, //缩小一倍
          // alignment: Alignment.centerLeft,//靠左显示
          // alignment: Alignment.centerRight, //靠右显示
          // fit: BoxFit.fill,//拉伸全屏
          // fit: BoxFit.cover, //剪裁不拉伸
          // fit: BoxFit.contain, //默认效果-根据容器显示原图
          repeat: ImageRepeat.repeatX, //X轴平铺
        ),
      ),
    );
  }
}

圆形图片

第一种方法

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text("你好Flutter"),
          ),
          body: const Column(
            children: [
              MyApp(),
              //也可以使用margin在这里设置间距
              SizedBox(
                height: 20,
              ), //SizedBox相当于一个块,用来设置高度,可以用来设置间距
              Circular()
            ],
          ))));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
          // scale: 2, //缩小一倍
          // alignment: Alignment.centerLeft,//靠左显示
          // alignment: Alignment.centerRight, //靠右显示
          // fit: BoxFit.fill,//拉伸全屏
          // fit: BoxFit.cover, //剪裁不拉伸
          // fit: BoxFit.contain, //默认效果-根据容器显示原图
          repeat: ImageRepeat.repeatX, //X轴平铺
        ),
      ),
    );
  }
}

//实现一个圆形图片---------------------------------
class Circular extends StatelessWidget {
  const Circular({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(75),
          image: const DecorationImage(
              image: NetworkImage(
                  "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"),
              fit: BoxFit.cover)),
    );
  }
}

第二种方法

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text("你好Flutter"),
          ),
          body: const Column(
            children: [
              MyApp(),
              //也可以使用margin在这里设置间距
              SizedBox(
                height: 20,
              ), //SizedBox相当于一个块,用来设置高度,可以用来设置间距
              ClipImage()
            ],
          ))));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
          // scale: 2, //缩小一倍
          // alignment: Alignment.centerLeft,//靠左显示
          // alignment: Alignment.centerRight, //靠右显示
          // fit: BoxFit.fill,//拉伸全屏
          // fit: BoxFit.cover, //剪裁不拉伸
          // fit: BoxFit.contain, //默认效果-根据容器显示原图
          repeat: ImageRepeat.repeatX, //X轴平铺
        ),
      ),
    );
  }
}

//实现一个圆形图片---------------------------------
class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
        height: 150,
        width: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

加载本地图片

1.在整体创建一个 images文件夹,并且在其中创建2.0x;3.0x两个文件夹。然后在images文件夹以及2.0x;3,0x两个文件夹中分别放入同样图片一式三份。

2.找到pubspec.yaml文件将assets配置的注释拿掉并修改---每张图片都需要单独配置三条属性

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

新-----需要注意图片的格式要与放置的一致
 # To add assets to your application, add an assets section, like this:
  assets:
    - images/a.png
    - images/2.0x/a.png
    - images/3.0x/a.png

main

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text("你好Flutter"),
          ),
          body: const Column(
            children: [
              MyApp(),
              //也可以使用margin在这里设置间距
              SizedBox(
                height: 20,
              ), //SizedBox相当于一个块,用来设置高度,可以用来设置间距
              ClipImage(),
              SizedBox(
                height: 20,
              ),
              LoaclImage(),
            ],
          ))));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
          // scale: 2, //缩小一倍
          // alignment: Alignment.centerLeft,//靠左显示
          // alignment: Alignment.centerRight, //靠右显示
          // fit: BoxFit.fill,//拉伸全屏
          // fit: BoxFit.cover, //剪裁不拉伸
          // fit: BoxFit.contain, //默认效果-根据容器显示原图
          repeat: ImageRepeat.repeatX, //X轴平铺
        ),
      ),
    );
  }
}

//实现一个圆形图片---------------------------------
class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
        height: 150,
        width: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

//加载本地图片
class LoaclImage extends StatelessWidget {
  const LoaclImage({super.key});

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

图标

内置图标

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter app"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(
          height: 20, //距上高度
        ),
        Icon(
          Icons.home, //小房子图标
          color: Colors.red,
        ),
        SizedBox(
          height: 20,
        ),
        Icon(
          Icons.access_time,
          size: 40, //图标大小
        )
      ],
    );
  }
}

阿里巴巴图表库

1.加入购物车--下载代码--解压zip--将json和ttf后缀文件提取

2.在根目录创建fonts文件--将步骤1的文件放入

2.找到pubspec.yaml找到fonts清掉注释--family可自定义 --代表一个字体名,根据需求定义;asset表示字体文件--引入fonts目录的ttf文件

  fonts:
    - family: Schyler
      fonts:
        - asset: fonts/iconfont.ttf
    # - family: Trajan Pro
    #   fonts:
    #     - asset: fonts/TrajanPro.ttf
    #     - asset: fonts/TrajanPro_Bold.ttf
    #       weight: 700

3.自定义一个类-定义图标文件

import 'package:flutter/material.dart';

class xqgFont {
  static const IconData fonte60d = IconData(
    0xe60d, //0x表示16进制;e60d表示unicode
    fontFamily: "Schyler", //在pubspec.yaml中配置的family
    matchTextDirection: true,
  );
  static const IconData fonte502 = IconData(
    0xe502, //0x表示16进制;e60d表示unicode
    fontFamily: "Schyler", //在pubspec.yaml中配置的family
    matchTextDirection: true,
  );
}

4.在main.dart中引用定义好的图标

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter app"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(
          height: 20, //距上高度
        ),
        Icon(
          Icons.home, //小房子图标
          color: Colors.red,
        ),
        SizedBox(
          height: 20,
        ),
        Icon(
          Icons.access_time,
          size: 40, //图标大小
        ),
        SizedBox(
          height: 20,
        ), ///////////////////////////////下面显示自己定义的图标
        Icon(
          xqgFont.fonte502,
          size: 40,
          color: Colors.purple,
        ),
        Icon(
          xqgFont.fonte60d,
          size: 40,
          color: Color.fromARGB(255, 28, 206, 81),
        )
      ],
    );
  }
}

5.如果需要再次引入,按顺序添加family等步骤即可

ListView 展示列表

当内容比较多的时候,会提示高度不足,这时就需要用到ListView

demo

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter app"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(//使用了ListView后,当内容溢出屏幕,既可上下滑动---------------------------
      children: const [
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.home,
          color: Colors.red,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.access_time,
          size: 40,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          xqgFont.fonte502,
          size: 40,
          color: Colors.purple,
        ),
        Icon(
          xqgFont.fonte60d,
          size: 40,
          color: Color.fromARGB(255, 28, 206, 81),
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.home,
          color: Colors.red,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.access_time,
          size: 40,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          xqgFont.fonte502,
          size: 40,
          color: Colors.purple,
        ),
        Icon(
          xqgFont.fonte60d,
          size: 40,
          color: Color.fromARGB(255, 28, 206, 81),
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.home,
          color: Colors.red,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          Icons.access_time,
          size: 40,
        ),
        SizedBox(
          height: 50,
        ),
        Icon(
          xqgFont.fonte502,
          size: 40,
          color: Colors.purple,
        ),
        Icon(
          xqgFont.fonte60d,
          size: 40,
          color: Color.fromARGB(255, 28, 206, 81),
        )
      ],
    );
  }
}

使用ListView配置列表

列表组件常见参数

image.png

垂直列表的宽度是自适应的

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("原神!启动!!!!"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        //Widget代表小组件
        ListTile(
          leading: Icon(Icons.home), //leading可以放任意组件--图片--图标等
          title: Text("首页"),
          trailing: Icon(
            xqgFont.fonte502,
            size: 40,
            color: Colors.purple,
          ), //trailing在右边设置图标
        ),
        Divider(), //一根横线
        ListTile(
          title: Text("温迪"),
          trailing: Icon(xqgFont.fonte60d, color: Colors.green),
        )
      ],
    );
  }
}

插入图片;一级标题-二级标题

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("原神!启动!!!!"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        //Widget代表小组件
        ListTile(
          // leading: Icon(Icons.home), //leading可以放任意组件--图片--图标等
          leading: Image.network(
              "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"), //图片
          title: const Text("首页"),
          subtitle: const Text("这是一条完整的凑字数的二级标题"),
          trailing: const Icon(
            xqgFont.fonte502,
            size: 40,
            color: Colors.purple,
          ), //trailing在右边设置图标
        ),
        Divider(), //一根横线
      ],
    );
  }
}

demo

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("原神!启动!!!!"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(10),
      children: <Widget>[
        Image.network(
          "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
          fit: BoxFit.fill,
        ),
        const SizedBox(
          width: 100,
          height: 44,
          child: Text(
            "我是一个标题",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ),
        Image.network(
            "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"),
        Image.network(
            "https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"),
      ],
    );
  }
}

水平列表

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("原神!启动!!!!"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 50, //ListView水平列表高度自适应,包裹一个SizeBox容器,来改变高度
        child: ListView(
          scrollDirection: Axis.horizontal, //水平列表
          padding: const EdgeInsets.all(10),
          children: <Widget>[
            Container(
              //注意:水平列表高度自适应,宽度需要设置
              width: 40,
              decoration: const BoxDecoration(color: Colors.red),
            )
          ],
        ));
  }
}

利用循环自动生成列表

import 'package:flutter/material.dart';
import 'xqgfont.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //配置主题颜色
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("原神!启动!!!!"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  //定义循环模拟生成内容
  List<Widget> _initListData() {
    //_下划线定义私有方法
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是一个列表--$i"),
      ));
    }
    return list; //返回list
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initListData(), //调用循环生成的内容
    );
  }
}

P25 6:00

avatar
文章
阅读
粉丝