美文网首页
Flutter Widget

Flutter Widget

作者: 付小影子 | 来源:发表于2019-11-15 16:48 被阅读0次

本篇文档里面记录的widget包含如下

text 文本
image 图片（普通，圆角 圆形）
listview 列表布局（水平，垂直，静态添加，动态添加）
gridview 网格布局（水平网格，垂直网格）
padding 组件之间设置padding
row 水平布局
column 垂直布局
expanded 权重占位分割
sizeBox 设置margin

hello world

//快捷键 ipm 调入material 库
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello shdow"),
        ),
        body: Center(
          child: Text("hhhhhhh"),
        ),
      ),
    );
  }
}

Flutter Widget的四个特性

1.widget只是UI配置，并不渲染UI
2.widget是一次性的
3.widget是不可变的
4.widget是轻量级的
widget分可变的和不可变的 StateFulWidget -- StateLessWidget
StateLessWidget:只需要build widget
StateFulWidget ：需要build widget 和 setStatue
每次需要变化都需要更新 statue ，重新build widget，创建一个新widget树，和旧的widget 树进行对比，更新变化部分

常用的一些widget

Text

child: Text(
        "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
        style: TextStyle(
            color: Colors.red,
            fontSize: 24,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue,
            decorationStyle: TextDecorationStyle.dotted,
            letterSpacing: 2),
      ),

image
image显示有两种，网络图片和本地图片
加载方式有四种，Image.network，Image.asset，Image.file，Image.memory
加载本地image，需要两步
1.在项目根目录创建文件夹，名字随意（images），文件夹下创建对应倍图的子目录
2.在pubspec.ymsl文件中导入 图片目录

33333.png
11111.png

1.普通 image

child: Image.network(
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1265135123,166333227&fm=26&gp=0.jpg",
        fit: BoxFit.cover,
      )

2.圆角 image

//第一种实现方式
decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          color: Colors.yellow,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1265135123,166333227&fm=26&gp=0.jpg")),
          borderRadius: BorderRadius.all(Radius.circular(10)),
          border: Border.all(color: Colors.blue, width: 2.0)),
    )

3.圆形 image

//第一种实现方式
child: CircleAvatar(
        radius: 36,
        backgroundImage: AssetImage("images/a.jpeg"),
      ),
//第二种实现方式
 child: ClipOval(
        child: Image.network(
          "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1265135123,166333227&fm=26&gp=0.jpg",
          fit: BoxFit.cover,
          alignment: Alignment.center,
          color: Colors.blue,
          colorBlendMode: BlendMode.darken,
        ),
      ),
//第三种实现方式 Container 中的字段decoration 中image字段
  decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.yellow,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1265135123,166333227&fm=26&gp=0.jpg")),
          border: Border.all(color: Colors.blue, width: 2.0)),
    )
//第四种实现方式
   child: Container(
      height: 300,
      width: 300,
      decoration: BoxDecoration(
          color: Colors.yellow,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1265135123,166333227&fm=26&gp=0.jpg")),
          borderRadius: BorderRadius.all(Radius.circular(150)),
          border: Border.all(color: Colors.blue, width: 2.0)),
    )

ListView

   return ListView(
        padding: EdgeInsets.all(10),
        scrollDirection: Axis.horizontal,
        children: <Widget>[
         这里可以放很多很多widget ，没有限制，text，image ，ListTile，container等
        ],
   );

ListView动态加载数据

/*import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';*/
import 'package:flutter/material.dart';
import 'package:flutter_demp/res/listData.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "hhhhhh",
      color: Colors.white,
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello shdow"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  /*List<Widget> _getData() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("hello shadow,我是第$i个数据列表"),
      ));
    }
    return list;
  }*/

  /*List<Widget> _getData() {
    var list = listData.map((value) {
      return ListTile(
        leading: Image.network(value["imageUrl"]),
        title: Text(value["title"]),
        subtitle: Text(value["author"]),
      );
    });
    return list.toList();
  }*/

  List list = new List();

  HomeContent() {
    for (var i = 0; i < 20; i++) {
      list.add("hello 付小影子，我是第$i 条数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    /*return ListView(
      padding: EdgeInsets.all(10),
      scrollDirection: Axis.vertical,
      children: this._getData(),
    );*/

    /*return ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(list[index]),
            subtitle: Text("hello shadow，我是副标题 副标题 副标题 副标题 --- $index"),
          );
        });*/

    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text(listData[index]["title"]),
          subtitle: Text(listData[index]["author"]),
          leading: Image.network(listData[index]["imageUrl"]),
        );
      },
      itemCount: listData.length,
    );
  }
}


List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      }，
很多数据。。。。
]

GridView
GridView 创建网格列表有多种方式，下面介绍两种。
1、可以通过 GridView.count 实现网格布局
2、通过 GridView.builder 实现网格布局
常用属性：


名称                                    类型                   说明
scrollDirection                 Axis                  滚动方法 
padding                            EdgeInsetsGeometry                   内边距
resolve                               bool                     组件反向排序
crossAxisSpacing            double                  水平子 Widget 之间间距
mainAxisSpacing             double                     垂直子 Widget 之间间距
crossAxisCount               int                    一行的 Widget 数量
childAspectRatio          double                         子 Widget 宽高比例

GridView.count

class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    var list = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(
              height: 10,
            ),
            Text(value["title"]),
          ],
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
            border: Border.all(width: 1, color: Colors.blue)),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,
      children: _getData(),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
    );
  }
}

GridView.build

class HomeContent extends StatelessWidget {

  Widget _getData2(BuildContext context, int index) {
    return Container(
      child: Column(
        children: <Widget>[

          ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0)),
            child: new Image.network(listData[index]["imageUrl"]),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            listData[index]["title"],
            maxLines: 2,
          ),
        ],
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(width: 1, color: Colors.blue)),
    );
  }

  @override
  Widget build(BuildContext context) {
    
    return GridView.builder(
        padding: EdgeInsets.all(10),
        itemCount: listData.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 10, mainAxisSpacing: 10, crossAxisCount: 3),
        itemBuilder: _getData2);
  }
}

padding
Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 10),
      child: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "http://photocdn.sohu.com/20120530/Img344387989.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "http://photocdn.sohu.com/20120530/Img344387989.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "http://photocdn.sohu.com/20120530/Img344387989.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
              "http://photocdn.sohu.com/20120530/Img344387989.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}
11.png
Row 水平布局组件 自定义动态组件,Column同理类似
mainAxisAlignment 主轴 横向的排序方式(start,center,end,平均分割等)
crossAxisAlignment 次轴 纵向的排序方式 
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconContainer(
          Icons.add,
          bgColor: Colors.blue,
        ),
        IconContainer(
          Icons.watch_later,
          bgColor: Colors.orange,
        ),
        IconContainer(
          Icons.camera,
          bgColor: Colors.pink,
        ),
        IconContainer(
          Icons.supervised_user_circle,
          bgColor: Colors.redAccent,
        ),
        IconContainer(
          Icons.search,
          bgColor: Colors.yellowAccent,
        ),
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  IconData icon;
  Color color = Colors.white;
  Color bgColor;

  double size = 32;

  IconContainer(this.icon, {this.color, this.bgColor, this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: this.bgColor,
      child: Center(
        child: Icon(
          this.icon,
          color: this.color,
          size: this.size,
        ),
      ),
    );
  }
}

小综合--row，column，sizeBox，image，text，expanded
Expanded 可以用在 Row 和 Column 布局中,类似线性布局的权重
flex 元素占整个父 Row/Column 的比例
child 子元素
SizedBox：类似margin，就是用来控制间隔区域，通过width和height属性控制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Column(
      children: <Widget>[
        Container(
          height: 180,
          color: Colors.red,
          child: Center(
            child: Text("hello 付小影子",style: TextStyle(color: Colors.black,fontSize: 22,fontStyle: FontStyle.italic)),
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network(
                  "http://photocdn.sohu.com/20120530/Img344387989.jpg",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
                flex: 1,
                child: Container(
                  height: 180,
                  child: ListView(
                    children: <Widget>[
                      Container(
                        height: 90,
                        child: Image.network(
                          "http://photocdn.sohu.com/20120530/Img344387989.jpg",
                          fit: BoxFit.cover,
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Container(
                        height: 90,
                        child: Image.network(
                          "http://photocdn.sohu.com/20120530/Img344387989.jpg",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  ),
                ))
          ],
        )
      ],
    );
  }
}
22.png

相关文章

网友评论

      本文标题：Flutter Widget

      本文链接：https://www.haomeiwen.com/subject/messictx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Flutter Widget|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！