美文网首页
Flutter之Widget

Flutter之Widget

作者: 学到不懂为止 | 来源:发表于2021-11-25 22:58 被阅读0次

1.TextWidget文本组件

  • 常用属性，Style属性的用法，让文本漂亮起来

1.TextAlign 文本对齐属性
2.maxLines 文本显示的最大行数
3.overflow 控制文本的溢出效果

// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: const Center(
          child: Text(
            '你见过登山者吗?在湿滑的山路上,滑倒不能阻止他们向 上;你见过航海家吗?在波涛汹涌的海面上,即使风再大浪再高, 也无法阻挡他们奋勇向前,这就是坚强而又勇敢的勇气。',
            textAlign: TextAlign.left,
            // maxLines: 2, // 显示两行
            // overflow: TextOverflow.ellipsis, // 文本末尾``...``效果
            style: TextStyle(
              fontSize: 25, //字体大小
              color: Color.fromARGB(255, 255, 125, 125), // 字体色值
              decoration: TextDecoration.underline, // 字体下划线
              decorationStyle: TextDecorationStyle.solid, // 下划线为实线
            ),
          ),
        ),
      ),
    );
  }
}

2.Container容器组件

1.alignment属性
2.设置宽高和颜色
3.padding内边距属性
4.margin外边距属性
5.decoration属性制作彩色背景

  • padding内边距属性
    • EdegeInsets.all()统一设置
    • EdgeInsets.fromLTRB(left,top,right,borrom) 设置左边、上边、右边、下边间距
  • decoration属性
    • BoxDecoration Widget使用
    • LinearGradient设置背景颜色渐变
// ignore_for_file: avoid_unnecessary_containers

// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: Center(
            child: Container(
          child: const Text(
            'Hello wo!',
            style: TextStyle(
              fontSize: 40.0,
            ),
          ),
          // Container 对齐方式 有8种
          alignment: Alignment.topLeft,
          width: 500.0,
          height: 400.0,
          // 这个属性影响渐变效果，所有注释
          // color: Colors.lightBlue,

          // 内边距理解为 容器 和 child(内容)之间的间距
          // padding: const EdgeInsets.all(10.0),
          // fromLTRB 指 左边、顶部、右边、底部的间距
          padding: const EdgeInsets.fromLTRB(20.0, 30.0, 0.0, 0.0),

          // 外边距理解为 容器 和 外部视图之间间距
          margin: const EdgeInsets.all(20.0),

          // 设置渐变，通过盒子修饰器
          decoration: const BoxDecoration(
              gradient: LinearGradient(colors: [
            Colors.lightBlue,
            Colors.greenAccent,
            Colors.purpleAccent
          ])),
        )),
      ),
    );
  }
}

3.imageWidget图片组件

1.Image Widget的几种加入形式
2.Fit属性（图片和容器之间的关系，如BoxFit.fill是充满整个容器）
3.图片的混合模式
4.Repeat属性让图片重复

  • Image Widget的几种加入形式
    • Image.asset加载资源图片，会使打包时包体过大
    • Image.network网络资源图片，经常换的或者动态的图片
    • Image.file本地图片，比如相机照相后的图片预览
    • Image.memory加载到内存中的图片，Uint8List 
// ignore_for_file: avoid_unnecessary_containers

// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: Center(
          child: Container(
            // 网络图片
            child: Image.network(
              'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
              // 缩放比例
              scale: 1.5,

              // 图片和容器之间的关系
              // fill充满容器 等7中方式
              // fit: BoxFit.fill,

              // 图片和颜色的混合模式 等20几种模式
              // color: Colors.greenAccent,
              // colorBlendMode: BlendMode.difference,

              // 图片重复显示
              // repeatX 横向重复、repeatY 纵向重复、noRepeat 不重复、repeat 横纵向都重复
              repeat: ImageRepeat.repeat,
            ),
            color: Colors.lightBlue,
            width: 400.0,
            height: 300.0,
          ),
        ),
      ),
    );
  }
}

4.ListViewWidget列表组件

1.ListView组件的语法
2.ListTitle的使用

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: ListView(
          // ignore: prefer_const_literals_to_create_immutables
          children: [
            
            // 右边图片、中间文本为每行的内容
            // ListTile(
            //   leading: Icon(Icons.access_alarm_sharp),
            //   title: Text('access_alarm_sharp'),
            // ),
            // ListTile(
            //   leading: Icon(Icons.access_time_filled_rounded),
            //   title: Text('access_alarm_sharp'),
            // ),
            // ListTile(
            //   leading: Icon(Icons.account_balance_sharp),
            //   title: Text('access_alarm_sharp'),
            // ),

            // 网络图片为每行的内容
            Image.network(
              'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
            ),
            Image.network(
              'https://img3.sycdn.imooc.com/5cce8be1088dd62806000338-360-202.jpg',
            ),
            Image.network(
              'https://img2.sycdn.imooc.com/5a2f4d7f00012c8106000338-360-202.jpg',
            ),
          ],
        ),
      ),
    );
  }
}

5.横向列表和自定义组件

1.scrollDirection属性 滚动方向，Axis.horizontal 为横向滚动，Axis.vertical 为纵向滚动

// 引入基础样式库，设计扁平化，谷歌推出的

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        // ignore: sized_box_for_whitespace
        body: Container(
          height: 200.0,
          child: MyList(),
        ),
      ),
    );
  }
}

class MyList extends StatelessWidget {
  const MyList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ignore: todo
    // TODO: implement build
    return ListView(
      // 设置滚动方向，Axis.horizontal 为横向滚动，Axis.vertical 为纵向滚动
      scrollDirection: Axis.horizontal,
      children: [
        // 右边图片、中间文本为每行的内容
        // ListTile(
        //   leading: Icon(Icons.access_alarm_sharp),
        //   title: Text('access_alarm_sharp'),
        // ),
        // ListTile(
        //   leading: Icon(Icons.access_time_filled_rounded),
        //   title: Text('access_alarm_sharp'),
        // ),
        // ListTile(
        //   leading: Icon(Icons.account_balance_sharp),
        //   title: Text('access_alarm_sharp'),
        // ),

        // 网络图片为每行的内容
        Image.network(
          'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
        ),
        Image.network(
          'https://img3.sycdn.imooc.com/5cce8be1088dd62806000338-360-202.jpg',
        ),
        Image.network(
          'https://img2.sycdn.imooc.com/5a2f4d7f00012c8106000338-360-202.jpg',
        ),
      ],
    );
  }
}

6.动态列表

1.传参和接收参数书写
2.实现动态列表ListView.builder(itemCount:列表的item个数, itemBuilder:该参数为一个方法，需要 return 一个Widget)

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors

// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';

void main() => runApp(MyApp(
      // 传参，构造list数据，使用方法generate(列表长度，一个方法)
      items: List<String>.generate(1000, (index) => 'Item $index'),
    ));

class MyApp extends StatelessWidget {
  // 存放外界传入的数据
  final List<String> items;

  // 覆写构造方法，作用于传参，
  // required 修饰为必传项
  // : 符号后为调用父类构造方法
  // ignore: prefer_const_constructors_in_immutables
  MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        // ignore: sized_box_for_whitespace
        body: ListView.builder(
          // 列表的item个数
          itemCount: items.length,
          // 该参数为一个方法，需要 return 一个Widget，这边可以通过index判断，写不同的widget
          itemBuilder: (context, index) {
            return ListTile(
              // ignore: unnecessary_string_interpolations
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

相关文章

网友评论

      本文标题：Flutter之Widget

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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