Flutter学习（三）

最新推荐文章于 2023-10-25 09:45:54 发布
最新推荐文章于 2023-10-25 09:45:54 发布
阅读量219 收藏
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiaihan/article/details/89518305
版权

Row水平布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget packedRow = Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.green[500]),
        Icon(Icons.star, color: Colors.black),
        Icon(Icons.star, color: Colors.black),
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("Row"),
      ),
      body: packedRow,
    );
  }
}

运行效果：
在这里插入图片描述

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("水平布局"),
       ),
      body: Row(
        children: <Widget>[
         const FlutterLogo(),
          const Text("您的预约订单已提交，如需修改或取消，请至我的-我的订单中操作"),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

出现警告：
在这里插入图片描述
expanded：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("水平布局"),
      ),
      body: Row(
        children: <Widget>[
          const FlutterLogo(),
          Expanded(child: Text("您的预约订单已提交，如需修改或取消，请至我的-我的订单中操作")),
          Icon(Icons.sentiment_very_satisfied)
        ],
      ),
    );
  }
}

自动换行效果：
在这里插入图片描述
column垂直布局

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: LayoutDemo(),
    ));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("垂直布局"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('We move under cover and we move as one'),
          Text('Through the night, we have one shot to live another day'),
          Text('We cannot let a stray gunshot give us away'),
          Text('We will fight up close, seize the moment and stay in it'),
          Text('It’s either that or meet the business end of a bayonet'),
          Text('The code word is ‘Rochambeau,’ dig me?'),
          Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
        ],
      ),
    );
  }
}

运行效果：
在这里插入图片描述

  • 主轴mainAxisSize,次轴crossAxisAlignment，水平布局主轴为X轴，次轴为Y轴，垂直布局主轴为Y轴，次轴为X轴

Stack布局

  • 按顺序，前面的在底部后面的在上部
  • alignment: const FractionalOffset(0.5, 0.9),参数为X轴，Y轴偏移比例
void main() => runApp(MaterialApp(
      title: "Stack层叠布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.9),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage("images/14.jpg"),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(color: Colors.black38),
          child: new Text(
            "hello,Trump",
            style: new TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        )
      ],
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Stack层叠布局示例"),
        ),
        body: new Center(
          child: stack
        ));
  }
}

运行效果：
在这里插入图片描述
层叠定位布局
绝对定位，偏移制定像素值

void main() => runApp(MaterialApp(
      title: "层叠定位布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("层叠定位布局示例"),
        ),
        body: new Stack(
          children: <Widget>[
            new Image.network(
                "https://pics2.baidu.com/feed/a8ec8a13632762d0312450694888b5fe503dc6bc.png?token=9864e38c2ceab51b62727dc9d77e264a&s=7C96749E84E876AC7836DD6003002039"),
            new Positioned(
              left: 100,
                top: 200,
                child: new Text(
              "Hello,Trump",
              style: new TextStyle(
                  fontSize: 20, fontFamily: "Serif", color: Colors.black),
            ))
          ],
        ));
  }
}

运行效果：

在这里插入图片描述
card布局


void main() => runApp(MaterialApp(
      title: "Card布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new SizedBox(
      height: 250,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
            new Divider(),
            new ListTile(
              title: new Text("北京市海淀区高梁桥斜街39号",style: new TextStyle(fontWeight: FontWeight.w300),),
              subtitle: new Text("交大知行大厦"),
              leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),
            ),
          ],
        ),
      ),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("Card布局示例"),
        ),
        body: new Center(
          child: card
        ));
  }
}

运行效果：
在这里插入图片描述滑动布局

void main() => runApp(MaterialApp(
      title: "滑动布局示例",
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("滑动布局示例"),
        ),
        body: new ListView(
          children: <Widget>[
            new Center(
              child: new Text(
                "九寨沟",
                style: new TextStyle(fontSize: 30),
              ),
            ),
            new Center(
              child: new Text(
                "五花海自然风景区",
                style: new TextStyle(fontSize: 16),
              ),
            ),
            new Center(
              child: new Text(
                '''
              九寨沟五花海 [1]  海拔2472米，水深5米，面积9万平方米，被誉为“九寨沟一绝”和“九寨精华”，在珍珠滩瀑布之上，熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类，以及沉水植物的分布差异，使一湖之中形成了许多斑斓的色块，宝蓝、翠绿、橙黄、浅红，似无数块宝石镶嵌成的巨形佩饰，珠光宝气，雍容华贵。金秋时节，湖畔五彩缤纷的彩林倒映在湖面，与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富，甚至超出了画家的想象力。黄昏时分，火红的晚霞映入水中，湖水似金星飞溅，彩波粼粼，绮丽无比。从老虎嘴俯瞰它的全貌，俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时，使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用，又像是热带珊瑚海中的沙子一样堆积着，连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照，海子更为迷离恍惚，绚丽多姿，一片光怪陆离，使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千，独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔，一株株彩叶交织成锦，如火焰流金。含碳酸钙质的池水，与含不同叶绿素的水生群落，在阳光作用下，幻化出缤纷色彩，一团团、一块块，有湛蓝、有墨绿、有翠黄。岸上林丛，赤橙黄绿倒映池中，一片色彩斑斓，与水下沉木、植物相互点染，其美尤妙，故得名五花海。九寨人说：五花海是神池，它的水洒向哪儿，哪儿就花繁林茂，美丽富饶。
　　          五花海的底部景观妙不可言，湖水一边是翠绿色的，一边是湖绿色的，湖底的枯树由于钙化，变成一丛丛灿烂的珊瑚，在阳光的照射下，五光十色，非常迷人。
              九寨沟五花海 [1]  海拔2472米，水深5米，面积9万平方米，被誉为“九寨沟一绝”和“九寨精华”，在珍珠滩瀑布之上，熊猫湖的下部于日则沟孔雀河上游的尽头。五花海四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千。由于海底的钙华沉积和各种色泽艳丽的藻类，以及沉水植物的分布差异，使一湖之中形成了许多斑斓的色块，宝蓝、翠绿、橙黄、浅红，似无数块宝石镶嵌成的巨形佩饰，珠光宝气，雍容华贵。金秋时节，湖畔五彩缤纷的彩林倒映在湖面，与湖底的色彩混合成了一个异彩纷呈的彩色世界。其色彩十分丰富，甚至超出了画家的想象力。黄昏时分，火红的晚霞映入水中，湖水似金星飞溅，彩波粼粼，绮丽无比。从老虎嘴俯瞰它的全貌，俨然是一只羽毛丰满的开屏孔雀。长海流入五花海的水在经过石灰岩岩脉时，使水中带入了大量的石灰钙华物质。这些含有钙华物质的白色砂粒有很强的过滤作用，又像是热带珊瑚海中的沙子一样堆积着，连这里的藻类也因为受到了钙华物质的影响而变成白色。阳光一照，海子更为迷离恍惚，绚丽多姿，一片光怪陆离，使人进入了童话境地
              五花海是九寨沟诸景点中最精彩一个。四周的山坡，入秋后便笼罩在一片绚丽的秋色中，色彩丰富，姿态万千，独霸九寨。五花海的彩叶大半集中在出水口附近的湖畔，一株株彩叶交织成锦，如火焰流金。含碳酸钙质的池水，与含不同叶绿素的水生群落，在阳光作用下，幻化出缤纷色彩，一团团、一块块，有湛蓝、有墨绿、有翠黄。岸上林丛，赤橙黄绿倒映池中，一片色彩斑斓，与水下沉木、植物相互点染，其美尤妙，故得名五花海。九寨人说：五花海是神池，它的水洒向哪儿，哪儿就花繁林茂，美丽富饶。
　　          五花海的底部景观妙不可言，湖水一边是翠绿色的，一边是湖绿色的，湖底的枯树由于钙化，变成一丛丛灿烂的珊瑚，在阳光的照射下，五光十色，非常迷人。
               ''',
                style: new TextStyle(fontSize: 14),
              ),
            ),
          ],
        ));
  }
}

运行效果：
在这里插入图片描述
appBar

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: DidiSample(),
    ));

class DidiSample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DidiSampleState();
}

class _DidiSampleState extends State<DidiSample> {
  Choice _selectedChoice = choices[0];

  void _select(Choice choice) {
   setState(() {
     _selectedChoice = choice;
   });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text("appbar"),
        actions: <Widget>[
          IconButton(
              icon: Icon(choices[0].icon),
              onPressed: () {
                _select(choices[0]);
              }),
          IconButton(
              icon: Icon(choices[1].icon),
              onPressed: () {
                _select(choices[1]);
              }),
          PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices
                    .skip(2)
                    .map<PopupMenuItem<Choice>>((Choice choice) {
                  return PopupMenuItem(
                      value: choice, child: Text(choice.title));
                }).toList();
              }),
        ],
      ),
      body: Padding(
          padding: const EdgeInsets.all(16),
          child: ChoiceDidi(choice: _selectedChoice)),
    )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果：
在这里插入图片描述

void main() => runApp(MaterialApp(
      title: "包装控件",
      home: _DidiSampleState(),
    ));

class _DidiSampleState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: DefaultTabController(
            length: choices.length,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('滴滴出行'),
                bottom: TabBar(
                    tabs: choices.map((Choice choice) {
                  return Tab(
                    text: choice.title,
                    icon: Icon(choice.icon),
                  );
                }).toList()),
              ),
              body: TabBarView(
                  children: choices.map((Choice choice) {
                return Padding(
                  padding: const EdgeInsets.all(16),
                  child: ChoiceDidi(
                    choice: choice,
                  ),
                );
              }).toList()),
            )
        )
    );
  }
}

class ChoiceDidi extends StatelessWidget {
  final Choice choice;

  const ChoiceDidi({Key key, this.choice}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                choice.icon,
                size: 128,
                color: textStyle.color,
              ),
              Text(
                choice.title,
                style: textStyle,
              )
            ],
          ),
        ));
  }
}

class Choice {
  final String title;
  final IconData icon;

  const Choice({this.title, this.icon});
}

const List<Choice> choices = <Choice>[
  Choice(title: '自驾', icon: Icons.directions_car),
  Choice(title: '自行车', icon: Icons.directions_bike),
  Choice(title: '乘船', icon: Icons.directions_boat),
  Choice(title: '公交车', icon: Icons.directions_bus),
  Choice(title: '火车', icon: Icons.directions_transit),
  Choice(title: '步行', icon: Icons.directions_walk),
];

运行效果：
在这里插入图片描述

西西里大律师
关注
专栏目录
flutter顶部小部件_使用VoidCallback和Function（x）与Flutter进行小部件通信
08-13 4159
flutter顶部小部件In this article we’re going to investigate how we can use callback-style events to communicate between widgets with Flutter. 在本文中，我们将研究如何使用Flutter在回调控件之间使用回调风格的事件进行通信。 Why is this impor...
Flutter学习路线总结
08-03 1440
之前使用过Hybrid和RN混编技术在原生中开发，现使用Flutter开发也有一年多了，项目一直在持续迭代中，并做过架构封装过多个组件和插件。在这里做个总结，希望能给感兴趣的同学一些帮助，之后会陆续更新Flutter使用中遇到的问题的解决方案和架构方面的文档。 第一步 环境的搭建 工欲善其事，必先利其器，任何一门新技术或语言的学习，首先都需要从基础的环境搭建开始，直接看官网安装即可https://flutterchina.club，选择并下载最新的稳定版本，根据流程安装SDK和模拟器，官网已经介绍的
Flutter入门三
光临天下
08-04 536
方法 方法既是对象 void fun() { print("执行了fun方法"); } void main() { Function function = fun; function(); } typedef关键字 看一下java写按钮点击事件 public interface OnClickListener { void onClick(View v); } public void setOnClickListener(OnClickListener l) { l.onC
flutter void Function
weixin_44911775的博客
10-25 184
如果sdk给你这么一个回调，你要怎么调用呢。
flutter学习记录
TangAcrab的博客
06-10 138
dart开发的app中必有一个 void main(){}函数 void main(){ } dart中未赋值的变量，值为 null，js中只声明未赋值的变量默认为值为 undefined。在dart中未指定变量的类型时，dart会根据等号右边的值去推测变量的值类型。 3.在dart中每一个语句结尾都要加上;分号，否则会报错。 4.在dart中变量的类型必须是能够解析到的。 5.在js中...
Flutter入门篇（一）
weixin_33898233的博客
03-03 207
距离Google发布Flutter已经有很长一段时间了，又是一门新的技术，那么我们到底是学呢还是学呢还是学呢？不要问我，我不知道，鬼特么知道我这辈子还要学习多少东西。其实新技术的出现也意味着，老技术会面临淘汰危机，而你将面临着失业危机。用一句话来说：你永远不知道意外和惊喜哪个先来~~ 环境搭建 Flutter的安装就不在这里演示了，可以从下面几个网站上学习安装。 Flutter官网 Flut...
Flutter学习资料
最新发布
06-13
总之，通过这份“Flutter学习资料”，你可以系统地学习到Flutter从入门到进阶的全部知识，包括Dart语言、Flutter框架、组件使用、状态管理、动画实现、第三方库的集成等方面。在实践中不断探索，结合视频教程和文字...
Flutter学习之构建、布局及绘制三部曲
01-04
学习Fullter也有些时间了，写过不少demo，对一些常用的widget使用也比较熟练，但是总觉得对Flutter的框架没有一个大致的了解，碰到有些细节的地方又没有文档可以查询，例如在写UI时总不知道为什么container添加了...
Flutter 学习实例
02-19
综上所述，通过这个"Flutter学习实例"压缩包，你可以实践Dart编程，理解状态管理，掌握布局和动画设计，熟悉第三方库的使用，以及进行应用测试。每个实例都是一次学习和提升的机会，不断探索和实践，你将快速成长为...
flutter学习与总结
03-10
此外，许多第三方库（如provider、riverpod等）作为状态管理解决方案，简化了复杂应用的架构设计。 总之，Flutter凭借其强大的性能、丰富的Widget库和高效的开发流程，已经成为移动开发领域的一个热门选择。通过...
flutter学习笔记(一)-main组件构建说明
tiyager的博客
01-10 463
Demo构建说明 直接上Demo源码,然后详细拆分说明 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { re...
flutter学习(1)
weixin_43794749的博客
05-22 354
flutter
【Flutter 面试】main入口函数会被调用几次
老孟Flutter
10-25 1466
老孟导读：这是一个读者面试时被问到的问题，这个问题前段时间我也在VIP交流群和大家一起探讨过。 这个问题涉及引擎的相关知识，如果不了解相关知识，很难回答正确，因为不管说调用几次都是错误的，下面来看一下引擎的相关知识。 创建一个 Flutter 项目，然后运行，main入口函数 只会执行一次，下面修改项目的 MainActivity ， class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bund..
flutter 填坑之旅（dart学习笔记篇）
热门推荐
奔跑的痕迹的博客
08-20 1万+
俗话说 ‘工欲善其事必先利其器’ 先要撸flutter app 不懂 dart 那就像不懂英语的人去国外求生一样，难！ 安装 dart 就不用说了，比较简单dart 官网 https://dart.dev/ 安装完成后就开启学习dart 旅程吧… 1 首先得找个ide (总不能使用记事本撸吧)，所以我们选择 idea 这个开发不错 1）idea 安装 dart （简单同直接 打开idea ...
Flutter之StatelessWidget和StatefulWidget的详细使用
watertekhqx的博客
05-28 4438
状态是在构建widget时可以同步读取的信息，或者在widget的生命周期中可能更改的信息，在Flutter中如果要管理状态需要用到 StatefulWidget。 什么是StatelessWidget？ Flutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。 当您描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildC...
Flutter基础—根据用户输入改变控件
咖啡花园
11-07 7346
之前使用的都是无状态控件，无状态控件从父控件接收参数，以final成员变量存储。当一个控件被build时，它使用这些存储的值作为创建控件的参数。为了构建更友好的体验，比如以更有趣的方式对用户的输入做出响应，应用程序通常会有一些状态。Flutter使用StatefulWidgets实现这个想法。StatefulWidgets能够生成有状态对象的控件，然后用来保持状态。import 'package:f
Flutter 函数
HuberCui的博客
04-15 1254
Flutter 有两种可选参数，一种是基于名称，一种是基于位置 {}是基于名称的，[]是基于位置的 1.基于名称 Person(String name,{String gender,int number}){ } //调用 Person('zhangsan')//可不传 Person('zhangsan',gender:'man',number:20); 2.基于位置 Pers...
Flutter (二) Dart入门 一篇就够了
没有翅膀的我们，只是随便认为不能飞而已
05-16 4339
Dart 中文官网 学习Flutterr入个门，应该不难，问题的关键是有个新语言Dart。要不是Flutter启用了，怕是没多少开发人员用吧，尤其前端仔，想js一站到底吧。 VsCode配置 Dart插件，昨天配置flutter自带了 code running Dart 概念 在变量中可以放置的所有东西都是对象，而每个对象都是类的实例。无论数字、函数和null都是对象。所有对象都继承自[Ob...
Flutter初体验（二）—— 创建第一个Flutter APP
weixin_33857679的博客
03-21 411
Flutter初体验（二）--- 创建第一个Flutter APP 在第一篇文章 Flutter初体验（一）---Mac 安装配置，学习了配置 Flutter 开发环境，并运行了Demo项目，本篇根据官方教程，学习创建自己的第一个Flutter APP。 参考文档 https://flutter.io/get-started/codelab/ 复制代码 项目需求 您将实施一个简单的移动应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值