Flutter 入门笔记 二

news/2024/7/20 22:01:32 标签: dart, android, ios, flutter

Text Widget 的使用

代码示例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(
            'Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!',
            // textAlign: TextAlign.center,
            // textAlign: TextAlign.start,
            // textAlign: TextAlign.end,
            // textAlign: TextAlign.right,
            textAlign: TextAlign.left,
            maxLines: 1,
            // overflow: TextOverflow.clip,
            // overflow: TextOverflow.ellipsis,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 25.0, //浮点数
              color: Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }
}

运行界面：
在这里插入图片描述

Container Widget 的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //Container Widget 实例
        body: Center(
          child: Container(
            child: new Text(
              'Hello Jessie',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10.0),
            padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0),
            margin: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple
                ]),
                border: Border.all(width: 5.0, color: Colors.red)),
          ),
        ),
      ),
    );
  }
}

运行界面：
在这里插入图片描述

Image 组件的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
  
        //Image 组件实例
        body: Center(
          child: Container(
            child: new Image.network(
              'https://ss0.baidu.com/6ON1bjeh1BF3odCf/it/u=717056753,1154007395&fm=15&gp=0.jpg',

              //fit: BoxFit.contain, //对图片不做任何修改
              //fit: BoxFit.fill, //以容器为基础,充满容器
              //fit: BoxFit.cover, //不变形式裁切
              // fit: BoxFit.fitWidth, //充满横向

              // color: Colors.lightBlue,
              // colorBlendMode: BlendMode.darken, //混合属性

              // repeat: ImageRepeat.repeat,
              // repeat: ImageRepeat.repeatX,
              repeat: ImageRepeat.noRepeat,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

运行界面：
在这里插入图片描述

ListView 组件的使用

ListView 组件简介

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView 实例
        body: new ListView(
          children: <Widget>[
            // new ListTile(
            //   leading: new Icon(Icons.perm_camera_mic),
            //   title: new Text('perm_camera_mic'),
            // ),
            // new ListTile(
            //   leading: new Icon(Icons.add_call),
            //   title: new Text('add_call'),
            // ),
            // new ListTile(
            //   leading: new Icon(Icons.access_time),
            //   title: new Text('access_time'),
            // ),

            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png'),
            new Image.network(
                'https://ss2.baidu.com/6ON1bjeh1BF3odCf/it/u=2772149407,2145032160&fm=15&gp=0.jpg'),
            new Image.network(
                'https://img.zcool.cn/community/0168315aa64e28a801206d96fc6feb.png@1280w_1l_2o_100sh.png'),
            new Image.network(
                'https://img.zcool.cn/community/01e9245aa64e28a801206d96c1138e.png@1280w_1l_2o_100sh.png'),
          ],
        ),
      ),
    );
  }
}

运行界面：
在这里插入图片描述

ListView 横向列表的使用

代码实例一：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView 横向列表的使用
        body: Center(
          child: Container(
            height: 200.0,
            child: new ListView(
              scrollDirection: Axis.horizontal, //横向
              children: <Widget>[
                new Container(
                  width: 180.0,
                  color: Colors.lightBlue,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.amber,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.deepOrange,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

代码实例二：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //将ListView写到外部
        body: Center(
          child: Container(
            height: 200.0,
            child: MyList(),
          ),
        ),
      ),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal, //横向
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepPurpleAccent,
        ),
      ],
    );
  }
}

运行界面：
在这里插入图片描述

ListView 动态列表的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final List<String> items;
  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView动态列表的使用
        body: new ListView.builder(
          //构建动态列表
          itemCount: items.length,
          itemBuilder: (context, index) {
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

运行界面：
在这里插入图片描述

GridView 网格列表的使用

代码实例一：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final List<String> items;
  MyApp({Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //GridView 网格列表的使用
        body: GridView.count(
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 10.0, //Axis是轴的意思,crossAxisSpacing是轴的距离
          crossAxisCount: 3, //每行显示多少列
          children: [
            //children为子元素,也就是每个网格装的东西
            const Text('I am Jessie1'),
            const Text('I am Jessie2'),
            const Text('I am Jessie3'),
            const Text('I am Jessie4'),
            const Text('I am Jessie5'),
            const Text('I am Jessie6'),
          ],
        ),
      ),
    );
  }
}

运行界面一：
在这里插入图片描述
代码实例二：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final List<String> items;
  MyApp({Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //GridView 网格列表的使用2
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, //每行显示3列
            mainAxisSpacing: 2.0, //主轴(纵轴)的距离
            crossAxisSpacing: 2.0, //横轴的距离
            childAspectRatio: 1.0, //横竖比(宽/高)
          ),
          children: [
            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0168315aa64e28a801206d96fc6feb.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01e9245aa64e28a801206d96c1138e.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0162f05aa64e28a801206d96f0e492.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01b35e5aa64e28a80121246de56679.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01cac35aa64e28a80121246dc2a309.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01dfb05aa64e28a80121246d5dca91.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0156cb5aa64e28a801206d96f870f8.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/014ab55aa64e28a80121246d310ae0.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}

运行界面二：
3在这里插入图片描述


http://www.niftyadmin.cn/n/1770164.html

相关文章

建筑电气工程设计常用图形和文字符号_最新建筑电气施工实例图解，图文并茂讲解，详细路线图操作指南...

建筑电气工程设计常用图形和文字符号_最新建筑电气施工实例图解，图文并茂讲解，详细路线图操作指南...

最新建筑电气施工实例图解&#xff0c;图文并茂讲解&#xff0c;详细路线图操作指南&#xff01;今天你又被老师傅训了吗?每天三问吾身&#xff0c;是否可以做的更好&#xff01;当你进入这一领域中时&#xff0c;你的老师傅可能会时时刻刻要求你&#xff0c;那是让你做得更好…
阅读更多...
360儿童上网控制软件_使用上网时间控制软件有必要吗？上网时间控制软件推荐...

360儿童上网控制软件_使用上网时间控制软件有必要吗？上网时间控制软件推荐...

互联网由当初的发展大国控制到引入千家万户走过了数个里程碑&#xff0c;如今全球所有人每天必备工具之一就是互联网&#xff0c;甚至是首选工具&#xff0c;人们可以在互联网上进行社交、娱乐、教育等活动&#xff0c;可以负责的说互联网已经深入到我们每天的工作和生活当中&a…
阅读更多...
Flutter 入门笔记 三

Flutter 入门笔记 三

布局 RowWidget 的详细讲解 代码实例&#xff1a; import package:flutter/material.dart;void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {// This widget is the root of your application.overrideWidget build(BuildContext context) {return Mate…
阅读更多...
python 宏定义_python|自定义函数计算杠杆系数

python 宏定义_python|自定义函数计算杠杆系数

def 函数名(参数1&#xff0c;参数2&#xff0c;参数3...):def jingying(a,b): ma/(a-b) print(m)#经营杠杆边际贡献/(边际贡献-固定成本)#财务杠杆息税前利润/(息税前利润-利息费用)def caiwu(x,y): zx/(x-y) print(z)jingying(48,24)caiwu(24,8)在Python中&#…
阅读更多...
Flutter 入门笔记 四

Flutter 入门笔记 四

导航父子页面的跳转返回 代码实例&#xff1a; import package:flutter/material.dart;void main() {runApp(MaterialApp(title: "导航演示",home: new FirstScreen(),)); }class FirstScreen extends StatelessWidget {overrideWidget build(BuildContext context…
阅读更多...
pthread 立即停止线程_线程同步

pthread 立即停止线程_线程同步

&#xfeff;[toc]一、线程同步的概念线程同步&#xff1f;怎么同步&#xff1f;一起运行&#xff1f;一起停止&#xff1f;我当年听说线程同步这个词的时候&#xff0c;也是一头雾水。在人们的日常生活中的锁大概有两种&#xff1a;一种是不允许访问&#xff1b;另一种是资源忙…
阅读更多...
Dart 基础快速入门

Dart 基础快速入门

老样子&#xff0c;先看官方文档&#xff1b; 程序入口 控制台输出 变量 创建和分配变量 默认值 检查 null 或零 Dart null 检查最佳实践 Functions 异步编程 Futures async 和 await
阅读更多...
wince系统_什么是实时操作系统（RTOS）

wince系统_什么是实时操作系统（RTOS）

在维基百科上&#xff0c;实时操作系统&#xff08;RTOS&#xff09;的定义如下&#xff1a;实时操作系统&#xff08;Real-time operating system, RTOS&#xff09;&#xff0c;又称即时操作系统&#xff0c;它会按照排序运行、管理系统资源&#xff0c;并为开发应用程序提供…
阅读更多...
最新文章

Copyright @ 2022~2023