Flutter——App入门main.dart 自定义组件Container() 列表组件 ListView.build

main.dart

    import 'package:flutter/material.dart';
    runApp()  // 入口方法
        MaterialApp( //所有组件的根组件
            home:Scaffold( // Scaffold组件
                appBar:AppBar(),
                body: Center(  //组件,居中
                        child:Text("文本信息")，
                        textDirection:TextDirection.ltr //左对齐
                    )  
            )
        )

自定义组件Container()

    StatelessWidget  无状态组件
        alignment: Alignment.bottomLeft  //容器内元素的方向
        border: Border.all  //边框
        borderRadius: BorderRadius.circular(100), //配置圆角
        boxShadow: const [
            BoxShadow(color: Colors.black, blurRadius: 10.0)
          ])   //阴影
        gradient:
              const LinearGradient(colors: [Colors.red, Colors.yellow]), // 渐变
        transform: Matrix4.rotationZ(0.2),//旋转
        transform: Matrix4.skewY(0.45),//旋转
        transform: Matrix4.translationValues(40, 10, 10),//位移  
        margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),  //外边距
        padding:const EdgeInsets.all(4),  //内边距
        child: Image.network("https://www.itying.com/themes/itying/images/ionic4.png",  //图片
        scale: 2,  //缩放
        fit: BoxFit.fitWidth,  //填充方式
        repeat: ImageRepeat.repeatX,  //平铺方式
         
       class MyBody extends StatelessWidget {
       const MyBody({super.key});
       @override
       Widget build(BuildContext context) {
           return Center(
              child: Container(
                alignment: Alignment.topLeft, //配置Container容器的元素的位置
                width: screenWidth * 0.9,
                height: screenHeight * 0.5,
                decoration: BoxDecoration(
                color: Colors.yellow, //背景色
                border: Border.all(
                color: Colors.red,
              ),
            ),
            child: Text(
              "哈哈哈AF 哈",
              style: TextStyle(color: Colors.white, fontSize: 30.0),
            ),
          ),
        );
       }
       ---圆形背景图
       width: 150,
       height: 150,
       decoration:  BoxDecoration(
       color: Colors.red,
       borderRadius: BorderRadius.circular(75),
       image: const DecorationImage(
          image: NetworkImage(
            "https://www.itying.com/themes/itying/images/ionic4.png",
          ),
        fit: BoxFit.cover)),
      ----圆形图片 2
        ClipOval(
            child: Image.network(
            "https://www.itying.com/themes/itying/images/ionic4.png",
            width: 150,
            height: 150,
            fit: BoxFit.cover,
          ),
        );
      本地图片
          配置
              assets:
                - images/dw.jpg
                - images/hg.png
          使用
              SizedBox(
              height: 150,
              width: 150,
              child: Image.asset(
                "images/hg.png",
                // fit: BoxFit.cover,
              ),
            );
    图标，自带图标，自定义图标
        自带图标
              Icon(Icons.category),
        自定义图标
             配置
             fonts:
            - family: myIcon
              fonts:
                - asset: fonts/iconfont.ttf
             自定义类
             static const IconData book =
             IconData(0X3447, fontFamily: "myIcon", matchTextDirection: true);
             使用
              Icon(
              ItYing.weixin,
              size: 40,
              color: Colors.green,
    )
    StatefulWidget   有状态组件

列表组件

    ListView
        scrollDirection: Axis.horizontal,  列表方向
        listView高度一般是自适应，需要在嵌套一个盒子
        ListView(
          children: const <Widget>[
            ListTile(
              leading: Icon(
                Icons.home,
              ),
              title: Text("首页"),
            ),
      ListView.builder//循环
      ListView.builder( 
          itemCount: list.length,
          itemBuilder: (context, index) {
          return ListTile(
          title: Text("${list[index]}"),
        );
          },
    );

ListView.builder//循环

import 'package:flutter/material.dart';
import './ListData.dart';

listView直接嵌套listView，会导致里面不能滑动

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("首页"),
        ),
        body:const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key}); 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: ListData.length,
      itemBuilder: (context,index){
        return ListTile(leading: Image.network(ListData[index]["imageUrl"]),
        title: Text(ListData[index]["title"]),
        subtitle: Text(ListData[index]["author"]),);
      },
    );
  }
}

GridView.count


    GridView.count(
      crossAxisCount:5, //排放个数
      padding: const EdgeInsets.all(10),
      crossAxisCount: 3, //个数
      crossAxisSpacing: 10, //水平间距
      mainAxisSpacing: 10, //垂直间距
      childAspectRatio: 1.0, //宽高比
      
    GridView.extent(
      maxCrossAxisExtent:200, //根据宽度自动计算每行排放几个
    GridView.builder
        @override
          Widget build(BuildContext context) {
        return GridView.builder(
          padding: const EdgeInsets.all(10),
          itemCount: ListData.length,
          // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 220,
              childAspectRatio: 1,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10),
          itemBuilder: _init,
        );
        //   gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        //   mainAxisExtent: 220,
        //   childAspectRatio: 1,
        //   crossAxisSpacing: 10,
        //   mainAxisSpacing: 10
        // ),
        // itemBuilder: _init);
      }

布局组件

    Padding 组件
         Padding(
             padding: EdgeInsets.all(10)
              )
    Row 组件
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //主轴位置
        crossAxisAlignment: CrossAxisAlignment.center, //次轴位置
      
        return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        IconContainer(
          Icons.home,
          color: Colors.blue,
        ),
        IconContainer(
          Icons.search,
        ),
        IconContainer(
          Icons.safety_check,
          color: Colors.blue,
        ),
      ],
    );
   width: double.infinity, //占满屏幕
   height: double.infinity,//占满屏幕
   
   FLex组件
       Flex(
    // Row(
      direction: Axis.horizontal,
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(
            Icons.home,
            color: Colors.blue,
          ),
        ),
        Expanded(
          flex: 2,
          child: IconContainer(
            Icons.search,
          ),
        )

        // IconContainer(
        //   Icons.search,
        // ),
      ],
    );

布局demo

import 'package:flutter/material.dart';
import './ListData.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("首页"),
        ),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.black,
        ),
        Row(
          children: [
            Expanded(
                flex: 2,
                child: SizedBox(
                  height: 180,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.cover,
                  ),
                )),
            Expanded(
              flex: 1,
              child: SizedBox(
                  height: 180,
                  child: Column(
                    children: [
                      Expanded(
                          flex: 1,
                          child: SizedBox(
                            width: double.infinity,
                            child: Image.network(
                              "https://www.itying.com/images/flutter/2.png",
                              fit: BoxFit.cover,
                            ),
                          )),
                      const SizedBox(
                        height: 5,
                      ),
                      Expanded(
                        flex: 2,
                        child: Image.network(
                          "https://www.itying.com/images/flutter/3.png",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  )),
            )
          ],
        )
      ],
    );
  }
}

布局层叠z-index

Stack和Positioned组件
    Stack(
      children: [
        ListView(
          children: const [
            ListTile(
              title: Text("我是列表1"),
            ),
            Divider(),
          Positioned(
          left: 0,
          top: 0,
          width: size.width,
          height: 44,
            child: Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  alignment: Alignment.center,
                  height: 44,
                  color: Colors.red,
                  child: const Text(
                    "二级导航",
                    style: TextStyle(color: Colors.white),
                  ),
                ))
          ],
        ))
Align()组件
    Widget build(BuildContext context) {
    // 获取设备得宽度
    final size = MediaQuery.of(context).size;
    return Column(children: [
      SizedBox(
          height: 40,
          width: double.infinity,
          child: Stack(
            children: const [
              Align(
                alignment: Alignment.topLeft,
                child: Text("次"),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Text("多次"),
              )
            ],
          ))
    ]);
  }
}
获取设备得宽度
final size = MediaQuery.of(context).size;

Card()组件
    Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), // card圆角效果
          elevation: 10,  //阴影度
          child: Column(children: const [
            ListTile(
              title: Text(
                "张三",
                style: TextStyle(fontSize: 28),
              ),
              subtitle: Text("高级软件工程师"),
            ),
            Divider(),
            ListTile(
              title: Text("18782074553"),
            ),
            ListTile(
              title: Text("地址：啊手动阀静安四季的风哈时间"),
            ),
          ]),
        ),

Flutter——App入门

main.dart

自定义组件Container()

列表组件

ListView.builder//循环

GridView.count

布局组件

布局demo

布局层叠z-index