Flutter 02 基础组件 Container、Text、Image、Icon、ListView

sziitjin2023-11-02 9:18

一、Container容器组件：

demo1：

Dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}



// 容器组件
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        decoration: const BoxDecoration(
          color: Colors.yellow,
        ),
        child: const Text(
          "你好Flutter",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

demo2：

Dart 复制代码 
//代码块 importM
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

// 代码块  statelessW
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        decoration:  BoxDecoration(
            color: Colors.yellow,
            gradient: const LinearGradient(
              //LinearGradient 背景线性渐变   RadialGradient径向渐变
              colors: [Colors.red, Colors.orange],
            ),
            boxShadow:const [
              //卡片阴影
              BoxShadow(
                color: Colors.blue,
                offset: Offset(2.0, 2.0),
                blurRadius: 10.0,
              )
            ],
            border: Border.all(
                color: Colors.black,
                width: 1
            )
        ),
        transform:Matrix4.rotationZ(0.2),
        child: const Text(
          "你好Flutter",
          style: TextStyle(fontSize: 20),
        ),

      ),
    );
  }
}

demo3：

Dart 复制代码 
//代码块 importM
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

// 代码块  statelessW
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(

      // child: Container(
      //   margin: EdgeInsets.all(20.0), //容器外补白
      //   color: Colors.orange,
      //   child: Text("Hello world !"),
      // ),
      // child: Container(
      //   padding: EdgeInsets.all(20.0), //容器内补白
      //   color: Colors.orange,
      //   child: Text("Hello world !"),
      // ),
      child: Container(
        alignment: Alignment.center,
        height: 40,
        width: 200,
        decoration:  BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(15)
        ),
        child: const Text(
          "按钮",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

二、Text组件详解：

demo1：

Dart 复制代码 
//代码块 importM
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

// 代码块  statelessW
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        decoration: BoxDecoration(
            color: Colors.yellow,
            gradient: const LinearGradient(
              //LinearGradient 背景线性渐变   RadialGradient径向渐变
              colors: [Colors.red, Colors.orange],
            ),
            boxShadow: const [
              //卡片阴影
              BoxShadow(
                color: Colors.blue,
                offset: Offset(2.0, 2.0),
                blurRadius: 10.0,
              )
            ],
            border: Border.all(color: Colors.black, width: 1)),
        transform: Matrix4.rotationZ(.2),
        child: const Text('各位同学大家好',
            textAlign: TextAlign.left,
            overflow: TextOverflow.ellipsis,
            // overflow:TextOverflow.fade ,
            maxLines: 2,
            textScaleFactor: 1.8,
            style: TextStyle(
                fontSize: 16.0,
                color: Colors.black,
                // color:Color.fromARGB(a, r, g, b)
                fontWeight: FontWeight.w800,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.lineThrough,
                decorationColor: Colors.white,
                decorationStyle: TextDecorationStyle.dashed,
                letterSpacing: 5.0)),
      ),
    );
  }
}

三、Image图片组件详解：

1、加载本地图片：

1）项目根目录新建images文件夹，images中新建2.x 3.x对应的文件

2）然后，打开pubspec.yaml 声明一下添加的图片文件，注意：空格

3）使用本地图片：

Dart 复制代码 
import 'package:flutter/material.dart';

//本地图片
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(
          "images/2.jpg",
          width: 150.0,
          height: 150.0,
          fit: BoxFit.cover),
    );
  }
}

2、加载远程图片：

Dart 复制代码 
import 'package:flutter/material.dart';

//图片路径 https://pics6.baidu.com/feed/43a7d933c895d1431790def92fe644055baf0727.jpeg@f_auto?token=18bdda8ca14969d4351c53a482c2b2ca&s=5BB105C154B1499472A1215B03001013
//远程图片
void main(){
  runApp(
      MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: const Text("你好Flutter")),
            body: const MyApp()
        ),
      )
  );
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.network(
          "https://pics2.baidu.com/feed/b7003af33a87e9502b64d86f4c2e9544fbf2b45b.jpeg@f_auto?token=8c6557279177a75d44029840f0db0daa&s=C8AA67D91C0090457095310903005057",
          // "https://pics6.baidu.com/feed/43a7d933c895d1431790def92fe644055baf0727.jpeg@f_auto?token=18bdda8ca14969d4351c53a482c2b2ca&s=5BB105C154B1499472A1215B03001013",
          width: 150.0,
          height: 150.0,
          fit: BoxFit.cover),
    );
  }
}

3、加载圆形图片：

1）Container实现圆形图片；

2）ClipOval实现圆形图片；

3）CircleAvatar实现圆形图片。

Dart 复制代码 
import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")),
        // body: const MyApp()
        // body: const MyApp2()
        body: const MyApp3()
    ),
  ));
}

const String URL = "https://pics2.baidu.com/feed/b7003af33a87e9502b64d86f4c2e9544fbf2b45b.jpeg@f_auto?token=8c6557279177a75d44029840f0db0daa&s=C8AA67D91C0090457095310903005057";

//Container实现圆形图片
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(75),
            image: const DecorationImage(
                image: NetworkImage(URL),
                fit: BoxFit.cover)),
      ),
    );
  }
}

//ClipOval实现圆形图片
class MyApp2 extends StatelessWidget {
  const MyApp2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
            URL,
            width: 150.0,
            height: 150.0,
            fit: BoxFit.cover),
      ),
    );
  }
}
//CircleAvatar实现圆形图片
class MyApp3 extends StatelessWidget {
  const MyApp3({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
        radius: 110,
        backgroundColor: Color(0xffFDCF09),
        child: CircleAvatar(
          radius: 100,
          backgroundImage:
          NetworkImage(URL),
        )
    );
  }
}

四、Icon图标组件：

1、使用Flutter官方lcons图标：

Material Design所有图标可以在其官网查看：------https://material. io/tools/icons/

Dart 复制代码 
import 'package:flutter/material.dart';

//使用Flutter官方Icons图标
//图标库：https://material.io/tools/icons/
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}



class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          children: const [
            Icon(Icons.search,color: Colors.red),
            Icon(Icons.home,color: Colors.cyan),
            Icon(Icons.category),
            Icon(Icons.shop),
          ]
        )
    );
  }
}

2、Flutter中借助阿里巴巴图标库自定义字体图标 ：

1）我们也可以使用自定义字体图标。阿里巴巴图标库官网iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

2）假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：

3）也可以在pubspec.yaml配置多个字体文件：

4）为了使用方便，我们定义一个Mylcons类，功能和lcons类一样：将字体文件中的所有图标都定义成静态变量：

Dart 复制代码 
import 'package:flutter/material.dart';

class MyIcons{
  // 设置图标
  static const IconData set = IconData(
      0xe601,
      fontFamily: 'myIcon',
      matchTextDirection: true
  );
}

5）使用：

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:flutter_chaper_01/src/asset/font.dart';

//使用阿里图标库支持
//图标库：https://material.io/tools/icons/
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          children: const [
            Icon(MyIcons.set,color: Colors.red),
            Icon(Icons.home,color: Colors.cyan),
            Icon(Icons.category),
            Icon(Icons.shop),
          ]
        )
    );
  }
}

五、ListView列表组件：

1、垂直列表demo：

Dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      // body: const VerticalList(),
      // body: const VerticalIconList(),
      body: const VerticalPicList(),
    ),
  ));
}

//垂直列表
class VerticalList extends StatelessWidget {
  const VerticalList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
      ],
    );
  }
}

//垂直图标列表
class VerticalIconList extends StatelessWidget {
  const VerticalIconList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        ListTile(
          leading: Icon(Icons.assignment, color: Colors.red),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.payment, color: Colors.green),
          title: Text("待付款"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.local_car_wash, color: Colors.orange),
          title: Text("待收货"),
        ),
        ListTile(
          leading: Icon(Icons.favorite, color: Colors.lightGreen),
          title: Text("我的收藏"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.people, color: Colors.black54),
          title: Text("在线客服"),
        ),
        Divider(),
      ],
    );
  }
}

//垂直图文列表
class VerticalPicList extends StatelessWidget {
  const VerticalPicList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.asset("images/1.png"),
          title: const Text('华北黄淮高温雨今起强势登场'),
          subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
        ),
        const Divider(),
        ListTile(
          leading: Image.asset("images/2.png"),
          title: const Text('保监局50天开32罚单 "断供"违规资金为房市降温'),
          subtitle: const Text(
            "中国天气网讯 保监局50天开32罚单 "断供"违规资金为房市降",
          ),
        ),
        const Divider(),
        ListTile(
            title: const Text('华北黄淮高温雨今起强势登场'),
            subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
            trailing: Image.asset("images/3.png")),
        const Divider(),
        ListTile(
          leading: Image.asset("images/4.png"),
          title: const Text('普京现身俄海军节阅兵：乘艇检阅军舰'),
        ),
        const Divider(),
        ListTile(
          leading: Image.asset("images/5.png"),
          title: const Text('鸿星尔克捐1个亿帮助困难残疾群体 网友：企业有担当'),
        ),
        const Divider(),
        ListTile(
          leading: Image.asset("images/6.png"),
          title: const Text('行业冥灯？老罗最好祈祷苹果的AR能成'),
        ),
      ],
    );
  }
}

2、水平列表，可以左右滑动demo：

Dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const HorizontalList(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 180,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            color: Colors.orange,
            child: Column(
              children: <Widget>[
                Image.asset("images/1.png"),
                const Text('我是一个文本')
              ],
            ),
          ),
          Container(
            width: 180.0,
            color: Colors.blue,
          ),
          Container(
            width: 180.0,
            color: Colors.deepOrange,
          ),
          Container(
            width: 180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
      ),
    );
  }
}

3、ListView动态列表组件，以及循环动态数据demo：

Dart 复制代码 
import 'package:flutter/material.dart';

//列表数据动态化
void main() {
  runApp(const MyApp());
}

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

// This widget is the root of your application. @override
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter ICON")),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  List<Widget> _initListView() {
    List<Widget> list = [];
    for (var i = 0; i < 100; i++) {
      list.add(const ListTile(
        title: Text("我是一个列表"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initListView(),
    );
  }
}


class MyHomePage2 extends StatelessWidget {
  List list = [];
  MyHomePage2({Key? key}) : super(key: key) {
    for (var i = 0; i < 10; i++) {
      list.add("我是一个列表--$i");
    }
  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("${list[index]}"),
          );
        });
  }
}
相关推荐
孤鸿玉14 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥21 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG2 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么？AI 究竟用的是什么？
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10KGG转MP3工具|非KGM文件|解密音频