<li id="fw3su"></li>
  • <li id="fw3su"></li>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
    <dl id="fw3su"></dl>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
  • <sup id="fw3su"></sup>
    <progress id="fw3su"></progress><div id="fw3su"><tr id="fw3su"></tr></div><input id="fw3su"><ins id="fw3su"></ins></input>

    【Flutter】开发之基础Widget(二)

    Flutter 的核心设计思想便是一切即 Widget ,在 Flutter 的世界里,包括 viewsviewcontrollerslayouts 等在内的概念都建立在 Widget 之上,可以理解成原生的 View

    lib/main.dart 是程序的主入口

    //导包
    import 'package:flutter/material.dart';
    //程序入口
    void main() => runApp(MyApp());
    //相当于主页面
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue, 
          ),
          home: MyHomePage(title: 'Home Page'),
        );
      }
    }
    复制代码

    可以看到,这个返回了一个 MaterialAppWidget ,作为程序的主界面。

    父级组件

    Widget 介绍
    StatelessWidget 无状态widget,类似静态页面,不与用户交互
    StatefulWidget 有状态widget,可以改变,可以与用户交互

    基础组件

    Widget 介绍
    MaterialApp 一般用作APP顶层的主页入口,可配置主题,多语言,路由等
    Scaffold 一般用户页面的承载Widget,包含appbar、snackbar、drawer等material design的设定。
    Appbar 一般用于Scaffold的appbar ,内有标题,二级页面返回按键等,当然不止这些,tabbar等?#19981;?#38656;要它
    Text 显示文本,类似于TextView
    Image 显示图片,可以加载本地资?#30784;ile、网络图片、内存图片
    TextField 输入框,类似于EditText
    • Text
    Text(
              //文本
              '我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text',
              //超出屏幕 clip裁剪,fade渐隐,ellipsis省略号
              overflow: TextOverflow.ellipsis,
              //对齐方式
              textAlign: TextAlign.center,
              //文本方向
              textDirection: TextDirection.rtl,
              //样式
              style: TextStyle(
                color: Colors.lightBlue,
                fontSize: 14,
                fontStyle: FontStyle.italic,
                backgroundColor: Colors.black87,
                //none无文字装饰,lineThrough删除线,overline文字上面显示线,underline文字下面显示线
                decoration: TextDecoration.lineThrough,
                //字母间隙
                letterSpacing: 10,
              ),
            )
    复制代码
    • Image
    方法 作用
    Image.assetImage(image: new AssetImage() 加载本地图片
    Image.fileImage(image: new FileImage() file
    Image.memoryImage(image: new MemoryImage() 加载内存byte数组
    Image.networkImage(image: new NetworkImage() 加载网络图片

    其中, asset 首先需要在根目录下建立 images 文件夹,然后在 pubspec.yaml 文件中添加引用才能使用

    flutter:
      uses-material-design: true
      assets:
        - images/ic_launcher.png
    复制代码
    Image.asset(
                    'images/ic_launcher.png',
                    width: 100,
                    height: 100,
                    fit: BoxFit.fitHeight,
                  ),
    
                  Image(
                    image: new NetworkImage(
                        'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                  )
    复制代码
    • TextField
    TextField(
                //键盘输入方式
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  //提示文字
                  hintText: '请输入手机号',
                  //内容边距
                  contentPadding: EdgeInsets.all(10),
                  //提示文字样式
                  hintStyle:
                      TextStyle(color: Colors.deepOrangeAccent, fontSize: 18),
                  //边框
                  border: OutlineInputBorder(
                    //圆角
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    borderSide: BorderSide(color: Colors.deepOrange),
                  ),
                ),
                //文字改变时调用
                onChanged: (String content) {
                  print("content=" + content);
                },
                //光标颜色
                cursorColor: Colors.deepOrangeAccent,
                //光标圆角
                cursorRadius: Radius.circular(4),
                //光标宽度
                cursorWidth: 2,
              )
    复制代码

    布?#20013;?/h3>
    Widget 多个子Widget 介绍
    Container 默认充满,包含了padding、margin、color、宽高、decoration 等配置
    Padding 用于设置padding, 对,你没有猜错,绝大部分Widget是没有padding属性的
    Center 用于居中显示
    Column 垂直布局,类似于LinearLayout 的orientation="vertical"
    Row 水平布局,类似于LinearLayout 的orientation="horizontal"
    Stack 类似于relativeLayout 或者FrameLayout
    ListView 类似于ListView或者RecyclerView
    Container
    Padding
    Column
    Row
    
    class ContainerDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ContainerDemo'),
          ),
          body: Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.only(left: 10, right: 20),
    //        color: Colors.orangeAccent,
            decoration: new BoxDecoration(
                //设置了decoration的color,就不能设置Container的color,否则会报错
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(10)),
                border: new Border.all(width: 10, color: Colors.blue)),
            child: Column(
              //Column 垂直方向,Row 水平方向
              mainAxisAlignment: MainAxisAlignment.center,
              //max相当于match_parent,min相当于wrap_content
              mainAxisSize: MainAxisSize.max,
              verticalDirection: VerticalDirection.up,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(20),
                  color: Colors.black54,
                  child: Text(
                    '1111111',
                  ),
                ),
                Text(
                  '111FFFFg',
                  style: TextStyle(
                    fontSize: 18,
                    backgroundColor: Colors.black54,
                  ),
                ),
                Text('222'),
                Text('333'),
              ],
            ),
          ),
        );
      }
    }
    复制代码
    • Stack

    Stack 类似于relativeLayout 或者FrameLayout,有2种定位方式

    1. alignment 作用于是全部的子 Widget

    class StackDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: Stack(
            textDirection: TextDirection.ltr,
            //以整个组件的中心为坐标原点,x、y 偏?#23631;?#21462;值范围为 [-1,1],
            // 如果 x 的偏?#23631;看?#20110; 0,则表示向右偏移,小于 0 则向左偏移;
            // 如果 y 轴的偏?#23631;看?#20110; 0 则向下偏移,小于 0 则向上偏移。
    //        alignment: Alignment(0, 0),
            //AlignmentDirectional.topStart:垂直靠顶部水平靠左对齐
            //AlignmentDirectional.topCenter:垂直靠顶部水平居中对齐
            //AlignmentDirectional.topEnd:垂直靠顶部水平靠右对齐
            //AlignmentDirectional.centerStart:垂?#26412;?#20013;水平靠左对齐
            //AlignmentDirectional.center:垂直和水平居中都对齐
            //AlignmentDirectional.centerEnd:垂?#26412;?#20013;水平靠右对齐
            //AlignmentDirectional.bottomStart:垂直靠底部水平靠左对齐
            //AlignmentDirectional.bottomCenter:垂直靠底部水平居中对齐
            //AlignmentDirectional.bottomEnd:垂直靠底部水平靠右对齐
            alignment: AlignmentDirectional.centerEnd,
            children: <Widget>[
              Container(
                color: Colors.black54,
                child: Text(
                  '1111111',
                ),
              ),
              Text('111FFFFg',
                  style: TextStyle(fontSize: 18, backgroundColor: Colors.black54)),
              Text('22222222')
            ],
          ),
        );
      }
    }
    复制代码
    2. Positioned 只能控制单个 Widget ,主要有 leftrighttopbottomwidthheight

    几个属性,分别表示距左、右、?#31232;?#19979;的边距,长度和宽度

    注意:

    1) leftright 并存时, left 生效; topbottom 并存时, top 生效

    2) leftrightwidth 不能并存, topbottomheight 不能并存,会报错

    class StackDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: Stack(
            textDirection: TextDirection.ltr,
           children: <Widget>[
              Container(
                color: Colors.black54,
                child: Text(
                  '1111111',
                ),
              ),
              Positioned(
                top: 100,
                child: Text(
                  '111FFFFg',
                  style: TextStyle(
                    fontSize: 18,
                    backgroundColor: Colors.black54,
                  ),
                ),
              ),
              Positioned(
                child: Text('22222222'),
                right: 10,
                top: 200,
              )
            ],
          ),
        );
      }
    }
    复制代码
    • ListView

    主要有3?#27490;?#36896;方式 ListView.builder ListView.separated ListView.custom

    1. ListView.builder

    使用?#28304;?#30340; item -- ListTile

    class ListViewDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ListViewDemo'),
            centerTitle: true,
          ),
          body: Container(
            color: Colors.white,
            child: ListView.builder(
              //item
              itemBuilder: (context, index) {
                return ListTile(
                  //前置图标
                  leading: new Icon(Icons.list),
                  title: new Text('标题'),
                  subtitle: new Text('副标题'),
                  //后置图标
                  trailing: new Icon(Icons.arrow_forward_ios),
                  //内容边距
                  contentPadding: EdgeInsets.all(10),
                );
              },
              //数量
              itemCount: 10,
              //内容适配
              shrinkWrap: true,
              //内边距
              padding: EdgeInsets.only(left: 10),
              //是否倒叙
              reverse: false,
              //item 高度 让item加载更加高效
              itemExtent: 50,
    
              //滑动方式
              //AlwaysScrollableScrollPhysics() 总是可以滑动
              //NeverScrollableScrollPhysics禁止滚动
              //BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
              //ClampingScrollPhysics 包裹内容 不会有回弹
              physics: BouncingScrollPhysics(),
              //预加载
              cacheExtent: 10,
            ),
          ),
        );
      }
    }
    复制代码
    2. ListView.separated

    相当于原生中的多类型,核心是 separatorBuilder ,与 itemBuilder 是一同渲染的,可以用它来实现分割线

    ListView.separated(
              itemBuilder: (context, index) {
                return ListTile(
                  //前置图标
                  leading: new Icon(Icons.list),
                  title: new Text('标题'),
                  subtitle: new Text('副标题'),
                  //后置图标
                  trailing: new Icon(Icons.arrow_forward_ios),
                  //内容边距
                  contentPadding: EdgeInsets.all(10),
                );
              },
              separatorBuilder: (context, index) {
                return Divider(
                  color: Colors.black45,
                  height: 10,
                  //左边缩进
                  indent: 50,
                );
              },
              itemCount: 20,
            )
    复制代码
    3. ListView.custom

    前2种方式是此方式的 快捷方式 ,虽然不常用,但还是要了解下

    ListView.custom(
              childrenDelegate: SliverChildBuilderDelegate((context, index) {
                return ListTile(
                  //前置图标
                  leading: new Icon(Icons.list),
                  title: new Text('标题 custom'),
                  subtitle: new Text('副标题 custom'),
                  //后置图标
                  trailing: new Icon(Icons.arrow_forward_ios),
                  //内容边距
                  contentPadding: EdgeInsets.all(10),
                );
              }),
            )
    复制代码

    效果同方式1

    示例

    模拟器上间隔线显示有问题,真机正常

    ListViewDemo

    相关代码

    class ListViewDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ListViewDemo'),
            centerTitle: true,
          ),
          body: Container(
            color: Colors.white,
            child: ListView.separated(
              itemBuilder: ((context, index) {
                return MoveItem();
              }),
              separatorBuilder: (context, index) {
                return Divider(
                  color: Colors.black45,
                  height: 10,
                );
              },
              itemCount: 10,
            ),
          ),
        );
      }
    }
    复制代码

    MoveItem 相关代码

    class MoveItem extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.all(4),
          child: Row(
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: Image.network(
                  'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg',
                  width: 100,
                  height: 150,
                  fit: BoxFit.fill,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 15),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(
                    '狄?#24335;?#20043;四大天王',
                    style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                  ),
                  Text('豆瓣评分6.6'),
                  Text('类型:动作、惊悚、冒险'),
                  Text('导演:徐克'),
                  Row(
                    children: <Widget>[
                      Text('主演:'),
                      Padding(
                        padding: EdgeInsets.only(left: 10),
                      ),
                      Container(
                        width: 40,
                        height: 40,
                        child: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
                        ),
                      ),
                      Container(
                        width: 40,
                        height: 40,
                        margin: EdgeInsets.only(left: 10),
                        child: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
                        ),
                      ),
                      Container(
                        width: 40,
                        height: 40,
                        margin: EdgeInsets.only(left: 10),
                        child: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      }
    }
    复制代码
    我来评几句
    登录后评论

    已发表评论数()

    相关站点

    +订阅
    ?#35753;?#25991;章
    11选五