flutter 三：界面结构

最新推荐文章于 2024-06-23 07:17:46 发布
最新推荐文章于 2024-06-23 07:17:46 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27597629/article/details/105056038
版权

文章目录

1.Material 应用

如果不想flutter debug的时候模拟器右上角显示DEBUG，就添加：

debugShowCheckedModeBanner: false,

在这里插入图片描述
另外建dart文件，给main.dart减负。
因为post.dart在相对于listview_demo.dart的上一级目录往下找，所以加一个…/

import '../model/post.dart';

在这里插入图片描述

2.AppBar：工具栏上的图标按钮（IconButton）

Scaffold下设置导航栏。

class Home extends StatelessWidget{
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
    appBar:AppBar(
      title:Text('NINGHAO'),
      elevation:30.0,//阴影默认4.0

      leading: IconButton(
        icon: Icon(Icons.menu), 
        tooltip: 'Navigation',
        onPressed: ()=>debugPrint('Navigation button is pressed')
        ),

        actions: <Widget>[//actions: <Widget>里可以设置一组小部件
          IconButton(
            icon: Icon(Icons.search), 
            tooltip: 'search',
            onPressed: ()=>debugPrint('search button is pressed')
         ),
          IconButton(
            icon: Icon(Icons.more_horiz), 
            tooltip: 'more_horiz',
            onPressed: ()=>debugPrint('more_horiz button is pressed')
         ),
        ],
    ),
    body:ListViewDemo()
  );
  }
}

在这里插入图片描述

3.TabBar：用标签形式展示内容

用DefaultTabController控制

class Home extends StatelessWidget{
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3, 
    child: Scaffold(
    appBar:AppBar(
      title:Text('NINGHAO'),
      elevation:30.0,//阴影默认4.0

      leading: IconButton(
        icon: Icon(Icons.menu), 
        tooltip: 'Navigation',
        onPressed: ()=>debugPrint('Navigation button is pressed')
        ),

      actions: <Widget>[//actions: <Widget>里可以设置一组小部件
          IconButton(
            icon: Icon(Icons.search), 
            tooltip: 'search',
            onPressed: ()=>debugPrint('search button is pressed')
         ),
          IconButton(
            icon: Icon(Icons.more_horiz), 
            tooltip: 'more_horiz',
            onPressed: ()=>debugPrint('more_horiz button is pressed')
         ),
        ],
      bottom: TabBar(
        tabs: <Widget>[
          Tab(icon: Icon(Icons.local_florist)),
          Tab(icon: Icon(Icons.change_history)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
        ),
    ),
    body:TabBarView(
      children: <Widget>[
        ListViewDemo(),
        Icon(Icons.local_florist,size:128.0,color:Colors.black12),
        Icon(Icons.directions_bike,size:128.0,color:Colors.black12),
      ],
    )
  ),
    );
  }
}

在这里插入图片描述
在这里插入图片描述

4.TabBar：自定义标签栏的样式

unselectedLabelColor: Colors.black38,
        indicatorColor: Colors.black54,//
        indicatorSize: TabBarIndicatorSize.label,
        indicatorWeight: 1.0,

在这里插入图片描述

5.Material：自定义按钮水波纹样式

highlightColor: Color.fromRGBO(255, 255, 255, 0.5),//白色，不透明度是0.5
splashColor: Colors.white70//水波纹不透明度是70的白色

在这里插入图片描述

6.Drawer：抽屉（边栏）

左边滑动出现的抽屉

drawer: Text('This is drawer'),

右边滑动出现的抽屉

endDrawer: Text('This is drawer'),

drawer: Container(
      color:Colors.blue,
      padding: EdgeInsets.all(8.0),//内边距
      child: Column(
        mainAxisAlignment:MainAxisAlignment.center,
        children:<Widget>[
          Text('This is drawer')
        ],
      ),
    ),

在这里插入图片描述

7. Drawer：在抽屉里使用 ListView， DrawerHeader，ListTile

drawer: Drawer(
      child:ListView(
        padding:EdgeInsets.zero,
        children:<Widget>[
          DrawerHeader(
            child:Text('header'.toUpperCase()),
            decoration: BoxDecoration(
              color:Colors.grey[100],
            ),
          ),
          ListTile(
            title:Text('Messages',textAlign:TextAlign.right),
            trailing: Icon(Icons.message,color:Colors.black12,size:22.0),
          ),
          ListTile(
            title:Text('Favorite',textAlign:TextAlign.right),
            leading: Icon(Icons.favorite,color:Colors.black12,size:22.0),
          ),
          ListTile(
            title:Text('Setting',textAlign:TextAlign.right),
            trailing: Icon(Icons.settings,color:Colors.black12,size:22.0),
          )
        ]
      )
    )

在这里插入图片描述

8.Drawer：抽屉的打开与关闭

/*leading: IconButton(//  注释掉，就会默认把Draw添加上
        icon: Icon(Icons.menu), 
        tooltip: 'Navigation',
        onPressed: ()=>debugPrint('Navigation button is pressed')
        ),
      */

关闭

onTap:() =>Navigator.pop(context),

在这里插入图片描述# 9.UserAccountDrawerHeader：抽屉里的用户帐号信息

UserAccountsDrawerHeader(
            accountName: Text('wanghao',style:TextStyle(fontWeight:FontWeight.bold)),
            accountEmail: Text('wanghao@ninghao.net'),
            currentAccountPicture:CircleAvatar(
              backgroundImage: NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
            ),
          ),

在这里插入图片描述

10.用户帐户头部的背景图像

decoration: BoxDecoration(//头部账户背景
              color:Colors.yellow[400],
              image: DecorationImage(
                image: NetworkImage('https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),
                fit: BoxFit.cover,//填充方式，全部填满
                colorFilter: ColorFilter.mode(Colors.yellow[400].withOpacity(0.6), BlendMode.hardLight),//滤镜
                ),
            ),

在这里插入图片描述

11.创建 DrawerDemo 小部件

单独用个小部件存放抽屉
drawer_demo.dart：

import 'package:flutter/material.dart';
class Drawerdemo extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child:ListView(
        padding:EdgeInsets.zero,
        children:<Widget>[
          /*DrawerHeader(
            child:Text('header'.toUpperCase()),
            decoration: BoxDecoration(
              color:Colors.grey[100],
            ),
          ),*/
          UserAccountsDrawerHeader(//头部账户
            accountName: Text('wanghao',style:TextStyle(fontWeight:FontWeight.bold)),
            accountEmail: Text('wanghao@ninghao.net'),
            currentAccountPicture:CircleAvatar(
              backgroundImage: NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
            ),
            decoration: BoxDecoration(//头部账户背景
              color:Colors.yellow[400],
              image: DecorationImage(
                image: NetworkImage('https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),
                fit: BoxFit.cover,//填充方式，全部填满
                colorFilter: ColorFilter.mode(Colors.yellow[400].withOpacity(0.6), BlendMode.hardLight),//滤镜
                ),
            ),

          ),
          
          ListTile(
            title:Text('Messages',textAlign:TextAlign.right),
            trailing: Icon(Icons.message,color:Colors.black12,size:22.0),
            onTap:() =>Navigator.pop(context),
          ),
          ListTile(
            title:Text('Favorite',textAlign:TextAlign.right),
            leading: Icon(Icons.favorite,color:Colors.black12,size:22.0),
            onTap:() =>Navigator.pop(context),
          ),
          ListTile(
            title:Text('Setting',textAlign:TextAlign.right),
            trailing: Icon(Icons.settings,color:Colors.black12,size:22.0),
            onTap:() =>Navigator.pop(context),
          )
        ]
      )
    );
  }
}

使用：
导入头文件

import 'demo/drawer_demo.dart';

drawer: Drawerdemo()

12.BottomNavigationBar：底部导航栏

bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,//底部导航栏超过4个就要设置这个type，不然不显示
      fixedColor: Colors.black,//激活状态的颜色
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          title: Text('Explore'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.history),
          title: Text('History'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list),
          title: Text('List'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          title: Text('person'),
          ),
      ]
      ),

在这里插入图片描述

13.BottomNavigationBar：底部导航栏的激活状态

单独写个dart，存放底部导航栏
bottom_navigation_bar.dart：

import 'package:flutter/material.dart';
class BottomNavigationbarDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BottomNavigationBarDemoState();
  }
}
class _BottomNavigationBarDemoState extends State<BottomNavigationbarDemo>{
 int _currentIndex=0;//自定义变量和函数
 void _onTapHandler (int index){
    setState((){
      _currentIndex=index;
    }

    );
 }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
      currentIndex: _currentIndex,//当前item
      onTap: _onTapHandler,//点击调用
      type: BottomNavigationBarType.fixed,//底部导航栏超过4个就要设置这个type，不然不显示
      fixedColor: Colors.black,//激活状态的颜色
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          title: Text('Explore'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.history),
          title: Text('History'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list),
          title: Text('List'),
          ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          title: Text('person'),
          ),
      ]
      );
  }
}

在这里插入图片描述

demo

Demo

煮酒Shae
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutter写一个漂亮的登录界面，Android面试基础知识
m0_64319298的博客
11-20 715
创建登录界面的TextForm / Widget buildSignInTextForm() { return new Container( decoration: new BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(8)) , color: Colors.white ), width: 300, height: 190, /* Flutter提供了一个Form widget，它可以对输入框进行分组， 然后进行一些统一操作，如.
flutterApp：我的第一个flutterApp
02-15
flutterApp 我的flutterApp flutterapp：第一个flutterApp，存在很多问题cs_app：新的app项目，深入熟悉flutter
全面理解-Flutter（万字长文，深度解析）
最新发布
2401_85667460的博客
06-23 1291
题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等录播视频免费分享出来。
深入了解Flutter界面开发
闲鱼技术的博客
05-08 725
概要本文不是flutter界面开发入门文章，而是一篇深入介绍Flutter framework关于视图树的创建与管理机制、布局、渲染的原理、以及flutter布局与渲染相...
（五）Flutter 界面结构 tab appbar bottomNavigationBar drawer
丿灬安之若死
12-12 616
上节课程的内容 都写在了一起 为了解耦 我们可以把他们单独提取出来一个类 lib 下新建demo/listview_demo.dart文件 内容如下 import 'package:flutter/material.dart'; import 'package:nihao_flutter/model/post.dart'; class ListViewDemo extends St...
flutter学习九 页面基本结构
weixin_45561719的博客
08-08 704
页面基本结构 //1，引入material包 import 'package:flutter/material.dart'; //2，运行包 void main() => runApp(MyApp()); //3，继承statelessWidegt基本组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ //4，返回container布局组件 return Container
Flutter （-1-） 第一个界面
唐僧的专栏
03-26 445
Flutter 学习笔记 前言： 最近刚好 有点时间， 准备学习下 Flutter， 谷歌出品， 必属精品， import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dar...
Flutter入门：教程1基础
04-07
2. **Flutter框架结构** Flutter的核心组件包括`Widgets`、`RenderObjects`和`Elements`。Widgets定义了应用程序的UI视图，RenderObjects负责渲染视图，而Elements则是Widgets在渲染树中的表示。这三个组件协同工作...
Flutter入门：教程4 ListView
04-08
以下是创建`ListView`的基本结构： ```dart ListView( children: [ // 添加你的Widget子项在这里 ], ), ``` 子项布局： `ListView`的子项可以是任何`Widget`，包括`Container`、`Text`、`Image`等。子项的排列...
flutter-firebase：具有以下内容的flutter项目：firebase登录+干净的体系结构
02-11
在"flutter-firebase"项目中，用户可以使用电子邮件和密码、电话号码或第三方身份提供商（如Google或Facebook）进行登录。Firebase的身份验证系统提供了一套完整的API，用于管理用户的注册、登录、密码重置和会话...
Mall_Flutter:商城的 Flutter 项目
05-02
4. **项目结构**：在Mall_Flutter项目中，文件结构通常遵循Flutter的最佳实践，包括lib目录下的各个feature模块、screens、widgets、services等，确保代码组织清晰，易于维护。 5. **组件化设计**：项目中的Widget...
Flutter界面实战
sheng_er_sheng的博客
05-09 1043
Flutter案例项目。接《Flutter学习笔记》做的实战
用Flutter构建漂亮的UI界面 - 基础组件篇
大灰狼的小绵羊哥哥的博客
07-09 6172
1. 前言 Flutter作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已开始使用。虽然目前其生态还没有完全成熟，但身靠背后的Google加持，其发展速度已经足够惊人，可以预见将来对Flutter开发人员的需求也会随之增长。 无论是为了现在的技术尝鲜还是将来的潮流趋势，都9102年了，作为一...
Flutter 界面简单跳转示例（路由）
u013788239的专栏
04-23 400
两种方式跳转 //直接跳转 Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage()) ); 命名路由 Future pushNamed(BuildContext context, String routeName) class MyApp ...
Flutter —— 页面基础
LinShunIos的博客
10-25 718
Flutter —— 基础Flutter 和 RNFlutter 页面基础页面自定义widgetMaterialApp & ScaffoldListView Flutter 和 RN Flutter能够在Android 和iOS 上同时运行的原因是iOS和Android上面都安装了Flutter的渲染引擎，而RN则是在原生UI的基础上进行包装，那么一旦原生的UI更新，RN就也需要更新，进行兼容处理，并且RN让Android的显示Android的控件，iOS显示iOS的控件，那么就不是一套UI。F
Flutter学习三-Flutter基本结构和原理
hn_lgc的专栏
08-02 949
Flutter有三种运行模式debug 调试模式profile 分析模式release 运行模式调试模式特点：原生平台：启用断言启用调试编译针对快速开发和运行周期进行了优化(但不针对执行速度、二进制大小或部署)。网络应用程序构建没有缩小该应用程序使用 dartdevc 编译器进行编译，以便于调试。release模式基本上就是调试模式反过来原生版本web版本该应用程序是用 dart2js 编译器编译的，以获得最佳性能。分析模式。......
Flutter控件及页面介绍
火山的博客
05-05 1568
Flutter部分基础知识。
使用Fluro实现Flutter界面跳转
LLL_foever的博客
07-15 380
练习界面跳转以及回传值 说明   整个练习总共就下面就四个文件，因为dart的静态变量不知道啥原因取不到值。所以这里参考示例将路由的配置单独拎出个文件。 文件名 作用 main.dart 用来启动程序和初始化路由配置 page_one.dart 第一个界面 page_two.dart 第二个界面 routes.dart 路由的配置类 配置路由 在routes.dart文件中配置路由，这里需要注意的事首页一定要用“/”配置，其它页无所谓。 import 'package:flu
flutter界面组件
qq_44076155的博客
12-07 249
接触flutter有快半年了，这期间跟着做了一个flutter项目，作为一个新手，最开始接触的是大量的界面，在这里记录下界面上的一些套用方法和模板,把代码贴进来，以后就能直接copy了(_) flutter界面模板 1.Appbar 沉浸式AppBar 这里了留了四个参数，包括一个title和leading2 PreferredSizeWidget transparentAppBar({ @required BuildContext context, Widget title, Widget
Flutter入门：环境搭建与项目创建
Flutter是一款由谷歌开发的开源移动UI框架，专为构建iOS和Android上的原生用户界面而设计，以其跨平台能力和高性能著称。Flutter的核心编程语言是Dart，因此学习Flutter之前，掌握Dart语言是必要的。本篇将介绍如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值