flutter学习

最新推荐文章于 2022-09-22 16:09:57 发布
最新推荐文章于 2022-09-22 16:09:57 发布
阅读量487 收藏
点赞数 1
分类专栏： 学习中的小问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SDAW_1/article/details/117017999
版权

注：本文所有内容学习引用自技术胖大佬

基础代码

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
            child:Text(
              'Hello ljhHello ljhHello ljhHello ljhHello ljhHelloHello ljhHello ljhHello ljh ljhHello ljh',
              textAlign: TextAlign.right,
              //最大行数
              maxLines: 1,
              //超出屏幕部分显示方式
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 25.0,
                color:Color.fromARGB(255, 255 , 150, 100),
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid,
              ),

              )
          ),
        ),
      );
  }
}

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
            alignment: Alignment.topLeft,
            width:500.0,
            height:400.0,
            padding:const EdgeInsets.fromLTRB(10.0,30.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:2.0,color:Colors.red)
            ),
          ),
          ),
        ),
      );
  }
}

图片

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            
            child:new Image.network(
    "http://img.improve-yourmemory.com/pic/33afa10cf2b273b4e7beb194c0a9bcc1-0.jpg",
    fit: BoxFit.fill,
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
    repeat: ImageRepeat.repeat,
  ),
            width:300.0,
            height:200.0,
            color: Colors.lightBlue,
          ),
          ),
        ),
      );
  }
}

列表

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSPang Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('这是tarbar')),
        body: new ListView(children: <Widget>[
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new Image.network(
    "http://img.improve-yourmemory.com/pic/33afa10cf2b273b4e7beb194c0a9bcc1-0.jpg",
    fit: BoxFit.fill,
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
    repeat: ImageRepeat.repeat,
  ) 
        ]),
      ),
    );
  }
}

所有布局 widgets 都具有以下任一项：

一个 child 属性，如果它们只包含一个子项 —— 例如 Center 和 Container

一个 children 属性，如果它们包含多个子项 —— 例如 Row、Column、ListView 和 Stack

组件

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:Center(
          child:Container(
            height:200.0,
            child:MyFuck()
            ),
          ),
        ),
      );
  }
}


class MyFuck extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSPang Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('这是tarbar')),
        body: new ListView(children: <Widget>[
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('access_time')),
          new Image.network(
    "http://img.improve-yourmemory.com/pic/33afa10cf2b273b4e7beb194c0a9bcc1-0.jpg",
    fit: BoxFit.fill,
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
    repeat: ImageRepeat.repeat,
  ) 
        ]),
      ),
    );
  }
}

动态获取列表

import 'package:flutter/material.dart';
void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));


class MyApp extends StatelessWidget{

  final List<String> items;

  //这一行不太懂，用了dart语法
//构造函数  key     传递个参数              调用父类
  MyApp({Key key, @required this.items}):super(key:key);
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          
          body:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}

在这里插入图片描述

GridView网络列表组件

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:GridView.count(
            padding:const EdgeInsets.all(20.0),
            //crossAxisSpacing:网格间的空当，相当于每个网格之间的间距
            crossAxisSpacing: 10.0,
            //crossAxisCount:网格的列数，相当于一行放置的网格数量
            crossAxisCount: 3,
            children: <Widget>[
              const Text('I am Jspang'),
              const Text('I love Web'),
              const Text('jspang.com'),
              const Text('我喜欢玩游戏'),
              const Text('我喜欢看书'),
              const Text('我喜欢吃火锅')
            ],
          )
        ),
      );
  }
}

水平布局Row

Flutter中的row控件就是水平控件，它可以让Row里边的子元素进行水平排列

不灵活布局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              ),
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.orangeAccent,
                child: new Text('黄色按钮'),
              ),  
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )
            ],
          )
        ),
      );
  }
}

在这里插入图片描述

灵活布局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              Expanded(child:new RaisedButton(
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              )),
              Expanded(child:new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                )

              ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )             
              )
            ],
          )
        ),
      );
  }
}

在这里插入图片描述

混用

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              Expanded(child:new RaisedButton(
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              )),
              new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )             
              )
            ],
          )
        ),
      );
  }
}

在这里插入图片描述

垂直排列column

把row改成column

crossAxisAlignment: CrossAxisAlignment.start, //居左对齐
crossAxisAlignment: CrossAxisAlignment.end, //居右对齐
crossAxisAlignment: CrossAxisAlignment.center, //居中对齐

主轴和副轴

main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。

cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。

主轴居中

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
          ),
          body:Column(
          //主轴设置居中
            mainAxisAlignment: MainAxisAlignment.center,
          //副轴设置左开始
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
             Text('I am JSPang'),
             Text('my website is jspang.com'),
             Text('I love coding')
            ],
          )
        ),
      );
  }
}

垂直水平居中

加入center组件

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
          ),
          body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
             Center(child:Text('I am JSPang')),
             Center(child:Text('my website is jspang.com')),
             Center(child:Text('I love coding'))
            ],
          )
        ),
      );
  }
}

Stack层叠布局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      var stack = new Stack(
      //alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。
        alignment: const FractionalOffset(0.5, 0.5),
        children: <Widget>[
          new CircleAvatar(
            backgroundImage: new NetworkImage('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2557853891,1393276761&fm=224&gp=0.jpg'),
            radius: 100.0,
          ),
          new Container(
            decoration: new BoxDecoration(
              color: Colors.lightBlue,
            ),
            padding: EdgeInsets.all(5.0),
            child: new Text('我是胖头鱼'),
          )
        ],
      );


      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
          ),
          body:Center(child:stack),
        ),
      );
  }
}

在这里插入图片描述

层叠定位组件

超过两个组件的层叠该如何进行定位那?这就是我们加今天要学的主角Positioned组件了。这个组件也叫做层叠定位组件
Positioned组件的属性：
bottom: 距离层叠组件下边的距离
left：距离层叠组件左边的距离
top：距离层叠组件上边的距离
right：距离层叠组件右边的距离
width: 层叠定位组件的宽度
height: 层叠定位组件的高度

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      var stack = new Stack(

        children: <Widget>[
          new CircleAvatar(
            backgroundImage: new NetworkImage('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2557853891,1393276761&fm=224&gp=0.jpg'),
            radius: 100.0,
          ),
          new Positioned(
            top:10.0,
            left:10.0,
            child: new Text('pangtouyu'),
          ),
          new Positioned(
            bottom:10.0,
            right:10.0,
            child: new Text('胖头鱼'),
          )
        ],
      );


      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('层叠布局'),
          ),
          body:Center(child:stack),
        ),
      );
  }
}

在这里插入图片描述

卡片组件布局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
  //卡片组件
      var card = new Card(
      //垂直布局
         child: Column(
           children: <Widget>[
             ListTile(
               title:new Text('吉林省吉林市昌邑区',style: TextStyle(fontWeight: FontWeight.w500),),
               subtitle: new Text('技术胖:1513938888'),
               leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
             ),
             new Divider(),
              ListTile(
               title:new Text('北京市海淀区中国科技大学',style: TextStyle(fontWeight: FontWeight.w500),),
               subtitle: new Text('胜宏宇:1513938888'),
               leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
             ),
             new Divider(),
              ListTile(
               title:new Text('河南省濮阳市百姓办公楼',style: TextStyle(fontWeight: FontWeight.w500),),
               subtitle: new Text('JSPang:1513938888'),
               leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
             ),
             new Divider(),

           ],
         ),

      );


      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('卡片布局'),
          ),
          body:Center(child:card),
        ),
      );
  }
}

代码中使用了一个垂直布局组件Column组件，然后利用了ListTile实现内部列表，这里需要说明的是ListTile不光可以使用在ListView组件中，然后容器组件其实都可以使用
在这里插入图片描述

页面导航和返回

它有两个最基本的属性：

child：可以放入容器，图标，文字。让你构建多彩的按钮。
onPressed：点击事件的相应，一般会调用Navigator组件。
我们在作页面导航时，大量的使用了RaisedButton组件，这个组件的使用在实际工作中用的也比较多。

Navigator.push 和 Navigator.pop
Navigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。

Navigator.pop：是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

import 'package:flutter/material.dart';
void main(){
  runApp(MaterialApp(
    title:'导航演示1',
    home:new FirstScreen()
  ));
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: AppBar(title:Text('导航页面')),
      body:Center(
        child:RaisedButton(
          child:Text('查看商品详情页面'),
          onPressed: (){
            Navigator.push(context,new  MaterialPageRoute(
              builder:(context) =>new SecondScreen())
            );
          },
        )
      )
    );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar:AppBar(title:Text('技术胖商品详情页')),
      body:Center(child:RaisedButton(
        child:RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      ))
    );

  }
}

导航参数的传递和接收

import 'package:flutter/material.dart';

//传递的数据结构,也可以理解为对商品数据的抽象
class Product{
  final String title;  //商品标题
  final String description;  //商品描述
  Product(this.title,this.description);
}

void main(){
  runApp(MaterialApp(
    title:'数据传递案例',
    home:ProductList(
      products:List.generate(
        20, 
        (i)=>Product('商品 $i','这是一个商品详情，编号为:$i')
      ),
    )
  ));
}

class ProductList extends StatelessWidget{
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('商品列表')),
      body:ListView.builder(
        itemCount:products.length,
        itemBuilder: (context,index){
          return ListTile(
            title:Text(products[index].title),
            onTap:(){
              Navigator.push(
                context, 
                MaterialPageRoute(
                  builder:(context)=>new ProductDetail(product:products[index])
                )
              );
            }
          );
        },
      )
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key ,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title:Text('${product.title}'),
      ),
      body:Center(child: Text('${product.description}'),)
    );
  }
}

页面跳转并返回数据

页面跳转后，当我们返回页面时返回结果到上一个页面（也就是父页面）。这样的场景经常用于，我们去子页面选择了一项选项，然后把选择的结果返回给父级页面。

异步请求和等待

Dart中的异步请求和等待和ES6中的方法很像，直接使用async…await就可以实现。比如下面作了一个找小姐姐的方法，然后进行跳转，注意这时候是异步的。等待结果回来之后，我们再显示出来内容。具体代码如下：

  _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法

    final result = await Navigator.push(//等待
      context, 
      MaterialPageRoute(builder: (context)=> XiaoJieJie())
      );

      Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

SnackBar的使用

SnackBar是用户操作后，显示提示信息的一个控件，类似Tost，会自动隐藏。
SnackBar是以Scaffold的showSnackBar方法来进行显示的

Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));

返回数据的方式

Navigator.pop(context,'xxxx');  //xxx就是返回的参数

完整代码

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title:'页面跳转返回数据',
    home:FirstPage()
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(title:Text("找小姐姐要电话")),
      body:Center(
        child: RouteButton(),
      )
    );
  }
}

//跳转的Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed:(){
          _navigateToXiaoJieJie(context);
      },
      child: Text('去找小姐姐'),
    );
  }

  _navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法

    final result = await Navigator.push(//等待
      context, 
      MaterialPageRoute(builder: (context)=> XiaoJieJie())
      );

      Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

class XiaoJieJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text('我是小姐姐')
      ),
      body:Center(
        child:Column(
          children: <Widget>[
            RaisedButton(
              child: Text('大长腿小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿:1511008888');
              },
            ) ,
            RaisedButton(
              child: Text('小蛮腰小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿:1511009999');
              },
            ) ,
          ],
        ) 
      ) ,
    );
  }
}

静态资源和图片使用时需要先去pubspec.yaml文件中注册

七彩猫猫虫
关注
专栏目录
Flutter时间轴
大灰狼的小绵羊哥哥的博客
11-27 1541
一，真实点,直接上图吧。 github地址视频教学地址 1.位置，上图可见,时间轴可以在左边，也可以在中间，当然了可以在任何位置。2.时间轴样式，当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷，砸门的时间轴也可以,上图（圆里面爱，图片，黄色背景文字，其实都是一长串部件）。3.线，我们需要和内容的高度一样，这里估计是很多人的痛点，没法自适应，这里也做到了。线的粗细，颜色，虚线间隔，渐变...当然砸门也实现了 二 ,看一眼吧 如何实现。 群里很多人都需要一个时间轴，对于时间轴自
Flutter 布局（七）- Row、Column详解
weixin_34023982的博客
08-01 558
本文主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件，将children排列成一行。估计是借鉴了Web中Flex布局，所以很多属性和表现，...
【Flutter】入门07-Row、Column与其主轴、交叉轴
夜雨Gecer的博客
02-01 823
为了方便，先写了一个展示用的小部件 class MyContainer extends StatelessWidget { Color _color; MyContainer(this._color); @override Widget build(BuildContext context) { return Container( width: 100, ...
Flutter中MainAxisAlignment和CrossAxisAlignment详解
热门推荐
喻志强的博客
01-16 6万+
Flutter MainAxisAlignment和CrossAxisAlignment详解
Flutter学习笔记-主轴与交叉轴的对其方式
yyxgs的博客
05-10 146
Flutter 学习路线图
01-20
Flutter 学习路线图 如果你真的觉得很难，坚持不了了，那就放弃，既然放弃了就不要抱怨没有得到。 选择你热爱的，坚持你选择的，不抱怨放弃的。 前言 Flutter越来越火，学习Flutter的人越来越多，对于刚接触Flutter...
flutter学习课件
02-26
这个“flutter学习课件”包含的资源很可能是为了帮助开发者或者初学者深入理解和掌握Flutter的基本概念、核心组件以及开发流程。下面我们将详细探讨Flutter的相关知识点。 1. **Flutter框架概述**：Flutter框架基于...
Flutter学习资料
最新发布
06-13
【Flutter学习资料】 Flutter，由谷歌开发的开源UI软件开发框架，用于构建高性能、高保真、跨平台的移动应用程序，支持iOS和Android两大主流移动操作系统。本学习资料旨在为初学者提供一套全面的Flutter知识体系，...
Flutter_learn_demo:Flutter_learn_demo Flutter学习历程
05-05
打开模拟器 运行 1.cd 根目录 2.flutter run -d all 或者 flutter run => ps:flutter packages get 获取三方库 调试: r: 运行 R:重新运行 p:显示网格 大写P:显示性能 o:切换模拟器 s:保存截图 h:显示帮助信息 q:...
Flutter 学习实例
02-19
综上所述，通过这个"Flutter学习实例"压缩包，你可以实践Dart编程，理解状态管理，掌握布局和动画设计，熟悉第三方库的使用，以及进行应用测试。每个实例都是一次学习和提升的机会，不断探索和实践，你将快速成长为...
Flutter进阶—垂直和水平布局
咖啡花园
04-27 2万+
垂直和水平布局垂直或水平排列控件是最常见的布局模式之一，您可以使用Row（行）控件来水平排列子控件，还可以使用Column（列）控件垂直排列子控件。要在Flutter中创建行或列，您可以将一个子控件列表添加到Row或Column控件中。反过来，每个子控件本身可以是行或列，依此类推。以下示例显示了如何在行或列中嵌套行或列。对齐控件您可以使用mainAxisAlignment和crossAxisAlig
【Flutter从入门到实战】 ⑧、FlexWidget、Flex的主轴和交叉轴、Row和Column的使用、Expanded的FlexFit和flex的使用、Stack、Positioned的使用
慢慢来就很快。
03-14 1341
【Flutter从入门到实战】 ⑧、FlexWidget、Flex的主轴和交叉轴、Row和Column的使用、Expanded的FlexFit和flex的使用、Stack、Positioned的使用
flutter 布局
XixiziMeng的博客
09-22 622
flutter 布局
Flutter实现层叠滑动效果
DLUT_WJX的博客
04-26 4596
实现效果 项目地址 滑动效果 使用PageView滑动来控制当前显示的位置 Stack( children: <Widget>[ // 两者堆叠在一起。通过PageView滑动的Controller来控制当前显示的page CardScrollWidget(currentPage), Positioned.fill( child: Page...
Flutter系列（四）——HelloWorld
03-05 582
想学Flutter，就请关注这个专栏 Flutter系列（一）——详细介绍 Flutter系列（二）——与React Native进行对比 Flutter系列（三）——环境搭建（Windows） Flutter系列（四）——HelloWorld 文档归档： https://github.com/yang0range/flutterfile 创建的第一个Demo 上一篇文章，详细的介绍了Flu...
Flutter Fluro路由库的页面切换动画效果
前端拾遗
08-06 1591
fluro的页面切换函数 Router.navigateTo 支持11种不同效果的切换动画，支持延时设置和自定义切换效果，下面将会对所有的效果展示出来，方便以后可以根据实际需求进行选择。 切换效果分类 fluro内置的切换动画可以分为3类： 各平台原生效果 非原生效果 自定义效果 Router.navigateTo( context path transition transitionBuilder transitionDuration ) 上一篇文章，已经介绍
Flutter项目运行失败解决方法
SDAW_1的博客
05-18 5249
flutter run 后报错如下 一共用了四种方法，前三种用完后仍然报错，第四种用后成功运行 第一种 删除项目文件中，android文件夹下的.gradle文件夹，然后再项目根目录下执行flutter clean命令，无效 第二种 修改flutter安装目录下的\packages\flutter_tools\gradle\flutter.gradle文件 将 private static final String MAVEN_REPO = “https://storage.googleapis.com/
Vuex-devtools插件的作用及用法
SDAW_1的博客
01-31 2736
detools插件作用：跟踪记录每一次改变state的状态，从而知道是哪个组件修改了state （前提：state是通过mutations修改） 如下例，目标为通过点击按钮修改mutations中的counter vuex配置文件index.js 创建store文件夹，在其中创建index.js文件来存放Vuex配置代码 import Vue from 'vue' import Vuex fro...
uniapp官网开源项目无法运行的解决方法
SDAW_1的博客
07-23 1545
解决方法： 将 此文件中的图片地址引用 …/…/static/logo.png 改为 @/static/logo.png
flutter学习重点
05-17
以下是Flutter学习的重点： 1. Dart编程语言：Flutter使用Dart作为其主要编程语言，因此您需要了解Dart的基础知识，如变量、数据类型、函数等。 2. Flutter框架：学习Flutter框架是理解Flutter的关键，包括了解...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值