devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flutter（三）：Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

作者：菜鸟追梦旅行 | 2024-03-01 02:38:35

赞

踩

Flutter（三）：Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

页面尺寸

在这里插入图片描述

  • 通知栏高度：MediaQuery.of(context).padding.top
  • 顶部导航高度：kToolbarHeight
  • 底部导航高度：kBottomNavigationBarHeight
  • 屏幕宽：MediaQuery.of(context).size.width
  • 屏幕高：MediaQuery.of(context).size.height
import 'package:flutter/material.dart';

// 描述文本
class DescText extends StatelessWidget {
  final String title;
  final double size;

  const DescText(this.title, {super.key, this.size = 10});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(title, style: TextStyle(fontSize: size, decoration: TextDecoration.none)),
    );
  }
}

class ScreenSizePage extends StatefulWidget {
  const ScreenSizePage({super.key});

  @override
  State<ScreenSizePage> createState() => _ScreenSizePage();
}

class _ScreenSizePage extends State<ScreenSizePage> {
  @override
  Widget build(BuildContext context) {
    // 屏幕宽度
    double screenWidth = MediaQuery
        .of(context)
        .size
        .width;
    // 屏幕高度
    double screenHeight = MediaQuery
        .of(context)
        .size
        .height;
    // 通知栏高度
    double noticeHeight = MediaQuery
        .of(context)
        .padding
        .top;
    // 屏幕中心
    double centerX = screenWidth / 2;
    double centerY = screenHeight / 2;

    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.grey,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: screenWidth,
              height: noticeHeight,
              color: Colors.yellow,
              child: DescText('通知栏高度($noticeHeight)：MediaQuery.of(context).padding.top'),
            ),
          ),
          Positioned(
            top: noticeHeight,
            left: 0,
            child: Container(
              width: screenWidth,
              height: kToolbarHeight,
              color: Colors.blue,
              child: const DescText('顶部导航高度($kToolbarHeight)：kToolbarHeight', size: 16),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: Container(
              width: screenWidth,
              height: kBottomNavigationBarHeight,
              color: Colors.green,
              child: const DescText(
                  '底部导航高度($kBottomNavigationBarHeight)：kBottomNavigationBarHeight', size: 14),
            ),
          ),
          Positioned(
            bottom: 80,
            left: 0,
            child: Container(
              width: screenWidth,
              height: 30,
              color: const Color.fromRGBO(255, 255, 0, .3),
              child: DescText('屏幕宽($screenWidth)：MediaQuery.of(context).size.width'),
            ),
          ),
          Positioned(
            top: 0,
            right: 80,
            child: Container(
              width: 30,
              height: screenHeight,
              color: const Color.fromRGBO(0, 255, 255, .3),
              child: RotatedBox(
                quarterTurns: 45,
                child: DescText(
                    '屏幕高($screenHeight)：MediaQuery.of(context).size.height', size: 12),
              ),
            ),
          ),
          Positioned(
            top: centerY - 18,
            left: centerX - 50,
            child: MaterialButton(
              onPressed: () => Navigator.pop(context, true),
              // 返回上一页
              color: Colors.white,
              textColor: Colors.blue,
              minWidth: 100,
              height: 36,
              child: const Text('返 回'),
            ),
          ),
        ],
      ),
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125

Stack布局

SelectWidget组件参考 https://blog.csdn.net/weixin_43526371/article/details/136256386

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:flutter_app/components/select_widget.dart';

class StackPage extends StatefulWidget {
  const StackPage({super.key});

  @override
  State<StackPage> createState() => _StackPage();
}

class _StackPage extends State<StackPage> {
  AlignmentDirectional alignmentValue = AlignmentDirectional.topStart;
  List<SelectOption> alignmentList = [
    SelectOption(label: 'topStart', value: AlignmentDirectional.topStart),
    SelectOption(label: 'topCenter', value: AlignmentDirectional.topCenter),
    SelectOption(label: 'topEnd', value: AlignmentDirectional.topEnd),
    SelectOption(label: 'centerStart', value: AlignmentDirectional.centerStart),
    SelectOption(label: 'center', value: AlignmentDirectional.center),
    SelectOption(label: 'centerEnd', value: AlignmentDirectional.centerEnd),
    SelectOption(label: 'bottomStart', value: AlignmentDirectional.bottomStart),
    SelectOption(label: 'bottomCenter', value: AlignmentDirectional.bottomCenter),
    SelectOption(label: 'bottomEnd', value: AlignmentDirectional.bottomEnd),
  ];

  TextDirection textDirectionValue = TextDirection.ltr;
  List<SelectOption> textDirectionList = [
    SelectOption(label: 'ltr', value: TextDirection.ltr),
    SelectOption(label: 'rtl', value: TextDirection.rtl),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stack 布局')),
      body: Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(50),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                flex: 1,
                child: SelectWidget(
                  title: 'AlignmentDirectional',
                  options: alignmentList,
                  onChange: (SelectOption selectOption) {
                    setState(() {
                      alignmentValue = selectOption.value as AlignmentDirectional;
                    });
                  },
                ),
              ),
              Expanded(
                flex: 1,
                child: SelectWidget(
                  title: 'TextDirection',
                  options: textDirectionList,
                  onChange: (SelectOption selectOption) {
                    setState(() {
                      textDirectionValue = selectOption.value as TextDirection;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.grey,
          child: Stack(
            alignment: alignmentValue,
            textDirection: textDirectionValue,
            children: [
              Container(width: 250, height: 250, color: Colors.red),
              Container(width: 200, height: 200, color: Colors.green),
              Container(width: 150, height: 150, color: Colors.blue),
              Container(width: 100, height: 100, color: Colors.black),
            ],
          ),
        ),
      ),
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86

Positioned布局

在这里插入图片描述

import 'package:flutter/material.dart';

class PositionedPage extends StatefulWidget {
  const PositionedPage({super.key});

  @override
  State<PositionedPage> createState() => _PositionedPage();
}

class _PositionedPage extends State<PositionedPage> {
  @override
  Widget build(BuildContext context) {
    // 屏幕宽度
    double screenWidth = MediaQuery
        .of(context)
        .size
        .width;
    // 屏幕高度
    double screenHeight = MediaQuery
        .of(context)
        .size
        .height;
    // 通知栏高度
    double noticeHeight = MediaQuery
        .of(context)
        .padding
        .top;
    // 屏幕中心
    double centerX = screenWidth / 2;
    double centerY = (screenHeight - noticeHeight - kToolbarHeight - kBottomNavigationBarHeight) /
        2;

    return Scaffold(
      appBar: AppBar(title: const Text('Positioned 布局')),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.grey,
        child: Stack(
          children: [
            // 中
            Positioned(
              top: centerY - 50,
              left: centerX - 50,
              child: Container(width: 100, height: 100, color: Colors.orange),
            ),
            // 左上
            Positioned(
              top: 10,
              left: 10,
              child: Container(
                width: 120,
                height: 120,
                color: Colors.red,
                child: Stack(
                  children: [
                    Positioned(top: 20,
                        left: 20,
                        child: Container(width: 50, height: 50, color: Colors.black)),
                  ],
                ),
              ),
            ),
            // 右上
            Positioned(
              top: 10,
              right: 10,
              child: Container(
                width: 120,
                height: 120,
                color: Colors.green,
                child: Stack(
                  children: [
                    Positioned(top: 20,
                        right: 20,
                        child: Container(width: 50, height: 50, color: Colors.blue)),
                  ],
                ),
              ),
            ),
            // 左下
            Positioned(
              bottom: 10,
              left: 10,
              child: Container(
                width: 120,
                height: 120,
                color: Colors.blue,
                child: Stack(
                  children: [
                    Positioned(bottom: 20,
                        left: 20,
                        child: Container(width: 50, height: 50, color: Colors.green)),
                  ],
                ),
              ),
            ),
            // 右下
            Positioned(
              bottom: 10,
              right: 10,
              child: Container(
                width: 120,
                height: 120,
                color: Colors.black,
                child: Stack(
                  children: [
                    Positioned(bottom: 20,
                        right: 20,
                        child: Container(width: 50, height: 50, color: Colors.red)),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'HOME'),
          BottomNavigationBarItem(icon: Icon(Icons.book), label: 'BOOK'),
        ],
      ),
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126

路由组件

在这里插入图片描述

路由组件

import 'package:flutter/material.dart';
import 'package:flutter_app/views/RowColumnPage.dart';
import 'package:flutter_app/views/StackPage.dart';
import 'package:flutter_app/views/ScreenSizePage.dart';
import 'package:flutter_app/views/PositionedPage.dart';

class MenuItem {
  final String title;
  final Widget widget;

  MenuItem({required this.title, required this.widget});
}

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

  static List<MenuItem> list = <MenuItem>[
    MenuItem(title: "Row、Column 布局", widget: const RowColumnPage()),
    MenuItem(title: "Stack 布局", widget: const StackPage()),
    MenuItem(title: "界面尺寸", widget: const ScreenSizePage()),
    MenuItem(title: "Positioned 布局", widget: const PositionedPage()),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: list.length,
      separatorBuilder: (BuildContext context, int index) => const Divider(height: 1),
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text(list[index].title),
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => list[index].widget));
          },
        );
      },
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

入口组件

import 'package:flutter/material.dart';
import 'package:flutter_app/components/router_widget.dart';

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

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 移除右上角DEBUG标识
      home: Scaffold(
        appBar: AppBar(title: const Text("目录")),
        body: const RouterWidget(),
      ),
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号