flutter学习(6)常见布局组件_app

flutter学习(6)常见布局组件

文章目录 flutter学习(6)常见布局组件一.Padding组件Padding组件属性demo 二、Row 水平布局组件Row组件属性demo先自定义一个按钮组件使用Row布局把Row布局放到Container里三、Flutter Column 垂直布局组件Column组件属性demo 四、Flutter Expanded (类似Web 中的Flex 布局)Expanded组件属性demo 五.例子

一.Padding组件

在html 中常见的布局标签都有padding 属性，但是Flutter 中很多Widget 是没有padding 属性。这个时候我们可以把那些组件设置为Padding组件的子组件，用Padding 组件的padding 属性来处理容器与子元素直接的间距

Padding组件属性

padding属性是Padding组件和它的子组件之间的距离

demo

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('Flutter列表')), body: LayoutDemo()));
  }
}

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

  @override
  Widget build(BuildContext context) {
    // return Container();
    return Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1.5,
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                  'https://www.itying.com/images/flutter/1.png',
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                  'https://www.itying.com/images/flutter/2.png',
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                  'https://www.itying.com/images/flutter/3.png',
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                  'http://www.kaotop.com/file/tupian/20220518/4.png',
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                  'http://www.kaotop.com/file/tupian/20220518/5.png',
                  fit: BoxFit.cover),
            ),
            Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network(
                    'http://www.kaotop.com/file/tupian/20220518/6.png',
                    fit: BoxFit.cover)),
          ],
        ));
  }
}

二、Row 水平布局组件 Row组件属性

该截图来自：Flutter中MainAxisAlignment和CrossAxisAlignment详解

demo 先自定义一个按钮组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return IconContainer(
      Icons.search,
      color: Colors.black,
    );
  }
}

//动态生成不同按钮组件
class IconContainer extends StatelessWidget {
  double? size;
  IconData icon;
  Color color = Colors.red; //默认
  //size 、color是可选参数
  IconContainer(this.icon, {this.size, required this.color}) {
    this.size = 32.0;
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        width: this.size! + 60.0,
        height: this.size! + 60.0,
        color: this.color,
        child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white)));
  }
}

the parameter can’t have a value of null

解决方式：double? size

参考:https://blog.csdn.net/shulianghan/article/details/119918924

The operator ‘+’ can’t be unconditionally invoked because the receiver can be ‘null’

解决方法，加上感叹号

使用Row布局

调用刚刚自定义的按钮组件

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Row(
      mainAxisAlignment: MainAxisAlignment.center, //居中显示

      children: [
        IconContainer(Icons.search, color: Colors.black),
        IconContainer(Icons.home, color: Colors.blueAccent),
        IconContainer(Icons.select_all, color: Colors.cyanAccent)
      ],
    );
  }
}

该截图来自:Flutter中MainAxisAlignment和CrossAxisAlignment详解

把Row布局放到Container里

把之前的mainAxisAlignment: MainAxisAlignment.center,给注释掉

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Container(
        height: 400.0,
        width: 400.0,
        color: Colors.pink,
        child: Row(
          // mainAxisAlignment: MainAxisAlignment.center, //居中显示

          children: [
            IconContainer(Icons.search, color: Colors.black),
            IconContainer(Icons.home, color: Colors.blueAccent),
            IconContainer(Icons.select_all, color: Colors.cyanAccent)
          ],
        ));
  }
}

效果如下:

修改mainAxisAlignment和crossAxisAlignment的值:

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Container(
        height: 400.0,
        width: 400.0,
        color: Colors.pink,
        child: Row(
          // mainAxisAlignment: MainAxisAlignment.center, //居中显示
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconContainer(Icons.search, color: Colors.black),
            IconContainer(Icons.home, color: Colors.blueAccent),
            IconContainer(Icons.select_all, color: Colors.cyanAccent)
          ],
        ));
  }
}

效果

该截图来自：Flutter中MainAxisAlignment和CrossAxisAlignment详解

三、Flutter Column 垂直布局组件 Column组件属性

demo

把刚刚的Column组件换成Row

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Container(
        height: 400.0,
        width: 400.0,
        color: Colors.pink,
        child: Column(
          // mainAxisAlignment: MainAxisAlignment.center, //居中显示
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconContainer(Icons.search, color: Colors.black),
            IconContainer(Icons.home, color: Colors.blueAccent),
            IconContainer(Icons.select_all, color: Colors.cyanAccent)
          ],
        ));
  }
}

效果：

四、Flutter Expanded (类似Web 中的Flex 布局) Expanded组件属性

demo

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.blue),
        ),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.blue),
        ),
      ],
    );
  }
}

//动态生成不同按钮组件
class IconContainer extends StatelessWidget {
  double? size;
  IconData icon;
  Color color = Colors.red; //默认
  //size 、color是可选参数
  IconContainer(this.icon, {this.size, required this.color}) {
    this.size = 32.0;
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        width: this.size! + 60.0,
        height: this.size! + 60.0,
        color: this.color,
        child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white)));
  }
}

效果

把flex分别改为2和3的效果：

2 3 1

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: IconContainer(Icons.search, color: Colors.blue),
        ),
        Expanded(
          flex: 3,
          child: IconContainer(Icons.search, color: Colors.orange),
        ),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.red),
        ),
      ],
    );
  }
}

左侧固定宽度，右侧自适应


class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //颜色是命名参数
    return Row(
      children: [
        IconContainer(Icons.search, color: Colors.blue),
        Expanded(
          flex: 3,
          child: IconContainer(Icons.search, color: Colors.orange),
        ),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.red),
        ),
      ],
    );
  }
}

//动态生成不同按钮组件
class IconContainer extends StatelessWidget {
  double? size;
  IconData icon;
  Color color = Colors.red; //默认
  //size 、color是可选参数
  IconContainer(this.icon, {this.size, required this.color}) {
    this.size = 32.0;
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        width: this.size! + 60.0,
        height: this.size! + 60.0,
        color: this.color,
        child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white)));
  }
}

五.例子

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
                child: Container(
              height: 180,
              color: Colors.black,
              child: Text('hello'),
            ))
          ],
        ),
        SizedBox(height: 10),
        Row(
          children: [
            Expanded(
                flex: 2,
                child: Container(
                  height: 180,
                  child: Image.network(
                    "http://www.kaotop.com/file/tupian/20220518/1.png",
                    fit: BoxFit.cover,
                  ),
                )),
            SizedBox(width: 10),
            Expanded(
                flex: 1,
                child: Container(
                    height: 180,
                    child: ListView(
                      children: [
                        Container(
                          height: 85,
                          child: Image.network(
                            "http://www.kaotop.com/file/tupian/20220518/2.png",
                            fit: BoxFit.cover,
                          ),
                        ),
                        SizedBox(height: 10),
                        Container(
                          height: 85,
                          child: Image.network(
                            "http://www.kaotop.com/file/tupian/20220518/3.png",
                            fit: BoxFit.cover,
                          ),
                        )
                      ],
                    )))
          ],
        )
      ],
    );
  }
}

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/993290.html

flutter学习(6)常见布局组件

发表评论

评论列表（0条）