您的位置: 首页  >  IT文章  >  flutter常用组件总结

flutter常用组件总结

分类: IT文章 • 2024-01-07 10:19:42

一、 继承StatelessWidget组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TODO:implementbuild
    return Center(
      child: Text(
        "My name is maple",
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

二、Text组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TODO:implementbuild
    return Center(
      child: Text(
        "My name is maple",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 40.0, //字体大小
            fontWeight: FontWeight.bold, //字体粗细
            color: Colors.yellow //字体颜色
        ),
      ),
    );
  }
}

三、MaterialApp顶层组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final routes = {
    '/': (BuildContext context) => new Home(),
  };

  @override
  Widget build(BuildContext context) {
    //TODO:implementbuild
    return MaterialApp(
        title: "标题",
        //主题
        theme:
            ThemeData(primarySwatch: Colors.red, brightness: Brightness.light),
        // 主页
        // home: Home(),
        // 路由
        routes: routes);
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        "My name is maple",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 30.0, //字体大小
            fontWeight: FontWeight.bold, //字体粗细
            color: Colors.yellow //字体颜色
            ),
      ),
    );
  }
}

四、Text，Container 组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TODO:implementbuild
    return MaterialApp(
      title: "标题",
      //主题
      theme: ThemeData(primarySwatch: Colors.red, brightness: Brightness.light),
      // 主页
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
            elevation: 30.0,
          ),
          body: Home()),
      //设置标题阴影 不需要的话值设置成 0.0
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      // Container类似于css的div
      child: Container(
        child: Text(
          "My name is maple and I like to eat",
          textAlign: TextAlign.center,
          //文本对齐方式
          overflow: TextOverflow.ellipsis,
          //文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）
          textScaleFactor: 1.5,
          //字体显示倍率
          textDirection: TextDirection.ltr,
          //文本方向（ltr 从左至右，rtl 从右至 左）
          maxLines: 2,
          //文字显示最大行数
          style: TextStyle(
            fontSize: 25.0, //字体大小
            fontWeight: FontWeight.bold, //字体粗细
            color: Colors.red, //字体颜色
            fontStyle: FontStyle.italic, //文字样式（italic 斜体，normal 正常体）
          ),
        ),
        //topCenter：顶部居中对齐
        // topLeft：顶部左对齐
        // topRight：顶部右对齐
        // center：水平垂直居中对齐
        // centerLeft：垂直居中水平居左对齐
        // centerRight：垂直居中水平居右对齐
        // bottomCenter 底部居中对齐
        // bottomLeft：底部居左对齐
        // bottomRight：底部居右对齐
        alignment: Alignment.topLeft,
        height: 300.0,
         300.0,
        // 类似于css的盒模型
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.blue,  2.0), //边框
          borderRadius: BorderRadius.all(
            //  Radius.circular(150),    //圆形
            Radius.circular(10), //圆角
          ),
        ),
        // padding 就是 Container 的内边距，指 Container 边缘与 Child 之间的距离
        // padding:EdgeInsets.all(20),
        padding: EdgeInsets.fromLTRB(10, 30, 5, 0),
        // margin 属性是表示 Container 与外部其他 组件的距离
        margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
        // 让 Container 容易进行一些旋转之类的
        // transform: Matrix4.translationValues(100, 0, 0)
        transform: Matrix4.rotationZ(0.3)
        // transform: Matrix4.diagonal3Values(1.2, 1, 1)
      ),
    );
  }
}

五、Image组件

flutter常用组件总结

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      // 加载本地文件
      child: Image.asset(
        'images/p2620309098.jpg',
        // fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。
        // BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
        // BoxFit.contain:全图显示，显示原比例，可能会有空隙。
        // BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要 充满整个容器，还不变形）。
        fit: BoxFit.cover,
        // 设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，
        // 这样可以是图片颜色和背景色混合。
        // 上面的图片就 是进行了颜色的混合，绿色背景和图片红色的混合
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
      ),
      height: 400,
       400,
      decoration: BoxDecoration(color: Colors.yellow),
    ));
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      //如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形。
      child: ClipOval(
        child: Container(
          // 加载网络文件
          child: Image.network(
            'https://img1.doubanio.com/view/photo/l/public/p2578828978.webp',
            // fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。
            // BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
            // BoxFit.contain:全图显示，显示原比例，可能会有空隙。
            // BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要 充满整个容器，还不变形）。
            fit: BoxFit.cover,
            // 设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，
            // 这样可以是图片颜色和背景色混合。
            // 上面的图片就 是进行了颜色的混合，绿色背景和图片红色的混合
            color: Colors.red,
            colorBlendMode: BlendMode.colorDodge,
          ),
          height: 400,
           400,
          decoration: BoxDecoration(color: Colors.yellow),
        ),
      ),
    );
  }
}

六、ListView列表组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2620309098.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2578828978.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2621748239.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img9.doubanio.com/view/photo/m/public/p2627557925.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img9.doubanio.com/view/photo/m/public/p2624006816.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
        Container(
          child: Text(
            '曼达洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img2.doubanio.com/view/photo/m/public/p2627320552.webp"),
      ],
    );
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
             250.0,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼达洛人')
              ],
            ),
          ),
          Container(
             250.0,
            color: Colors.orange,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼达洛人')
              ],
            ),
          ),
          Container(
             250.0,
            color: Colors.blue,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼达洛人')
              ],
            ),
          ),
          Container(
             250.0,
            color: Colors.deepOrange,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼达洛人')
              ],
            ),
          ),
          Container(
             250.0,
            color: Colors.deepPurpleAccent,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼达洛人')
              ],
            ),
          ),
        ],
      ),
    );
  }
}

七、动态ListView组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  List httpList = [
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp'
  ];

  //自定义方法
  List<Widget> _getData() {
    List<Widget> list = new List();
    httpList.forEach((http) {
      list.add(Container(
        height: 300,
        child: Image.network("$http"),
      ));
    });
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  List listData = [
    {
      "title": '曼达洛人第1集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第2集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第3集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第4集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第5集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第6集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
  ];

  //自定义方法
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        // 分割线
        decoration: BoxDecoration(
            color: Colors.white,
            border:
                Border(bottom: BorderSide( 1, color: Colors.black12))),
        child: ListTile(
            leading:
                CircleAvatar(backgroundImage: NetworkImage(value["imageUrl"])),
            title: Text(value["title"]),
            subtitle: Text(value["type"])),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getListData(),
    );
  }
}

八、GridView组件（网格视图）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  List listData = [
    {
      "title": '曼达洛人第1集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第2集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第3集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第4集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第5集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼达洛人第6集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
  ];

  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(height: 10),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            )
          ],
        ),
        decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(const Radius.circular(8.0)), //外圆角
            border: Border.all(
                color: Color.fromRGBO(111, 111, 111, 0.9),  2)),
        // height: 400,  //设置高度没有反应
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //水平子 Widget 之间间距
      crossAxisSpacing: 10.0,
      //垂直子 Widget 之间间距
      mainAxisSpacing: 10.0,
      //一行的 Widget 数量
      padding: EdgeInsets.symmetric(horizontal:16),
        crossAxisCount: 2,
      //宽度和高度的比例
      childAspectRatio: 0.63,
      children: this._getListData(),
    );
  }
}

相关推荐