Flutter - 随笔分类(第5页) - 鲤斌

24、去除右上方的debug图标

摘要：class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( debugShowChec 阅读全文

posted @ 2023-12-18 00:05 鲤斌阅读(27) 评论(0) 推荐(0)

23、Flutter AppBar TabBar TabBarView

摘要：AppBar自定义顶部按钮图标、颜色 class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return Sca 阅读全文

posted @ 2023-12-18 00:05 鲤斌阅读(405) 评论(0) 推荐(0)

22、Scaffold属性抽屉菜单Drawer

摘要：在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。 class MyFlutterApp extends StatelessWidget { const MyFl 阅读全文

posted @ 2023-11-30 18:56 鲤斌阅读(250) 评论(0) 推荐(0)

21、Scaffold属性 FloatingActionButton实现类似闲鱼App底部导航凸起按钮

摘要：FloatingActionButton详解 FloatingActionButton简称FAB ,可以实现浮动按钮，也可以实现类似闲鱼app的底部凸起导航实现类似闲鱼App底部导航凸起按钮 class MyFlutter2 extends StatefulWidget { const MyFlu 阅读全文

posted @ 2023-11-29 18:50 鲤斌阅读(107) 评论(0) 推荐(0)

20、Scaffold属性 BottomNavigationBar 自定义底部导航

摘要：BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是 Scaffold组件的参数。 BottomNavigationBar 常见的属性 BottomNavigationBar 底部菜单选中 class MyFlutter1 ex 阅读全文

posted @ 2023-11-29 18:49 鲤斌阅读(194) 评论(0) 推荐(0)

19、Flutter StatelessWidget 、 StatefulWidget

摘要：在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget / StatefulWidget。 StatelessWidget是无状态组件，状态不可变的widget StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变。通俗的讲：如果我们阅读全文

posted @ 2023-11-29 15:40 鲤斌阅读(24) 评论(0) 推荐(0)

18、Scaffold 布局组件

摘要：Scaffold 是一个非常重要的布局组件，它提供了一个常见的应用程序结构布局，包含了许多基础的 UI 元素和交互方式。 Scaffold 组件主要由以下几个部分组成: AppBar：用于显示在页面顶部的应用栏，通常包含标题、导航按钮、操作按钮等。 body：包含了页面主要内容的部分，可以是任意的阅读全文

posted @ 2023-11-23 16:23 鲤斌阅读(149) 评论(0) 推荐(0)

17、Flutter StatelessWidget 、 StatefulWidget

摘要：在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget。 StatelessWidget是无状态组件，状态不可变的widget StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变。通俗的讲：如果我们想改阅读全文

posted @ 2023-11-23 16:23 鲤斌阅读(45) 评论(0) 推荐(0)

16、Flutter Wrap组件实现流布局

摘要：Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Column表现几乎一致。但 Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。 Wrap组件的使用 //自定义按钮组件 class MyAp 阅读全文

posted @ 2023-11-22 10:13 鲤斌阅读(185) 评论(0) 推荐(0)

15、Flutter 按钮组件

摘要：按钮组件的属性 ButtonStylee里面的常用的参数 ElevatedButton ElevatedButton 即"凸起"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大 class MyApp extends StatelessWidget { const MyApp({super.key 阅读全文

posted @ 2023-11-21 13:40 鲤斌阅读(196) 评论(0) 推荐(0)

14、Flutter Card卡片组件

摘要：Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感。 Card实现一个通讯录的卡片 class MyApp2 extends StatelessWidget { const MyApp2({super.key}); @override Wid 阅读全文

posted @ 2023-11-20 11:20 鲤斌阅读(335) 评论(0) 推荐(0)

13、Flutter AspectRatio 调整子元素child的宽高比

摘要：AspectRatio的作用是根据设置调整子元素child的宽高比。 childAspectRatio 是 GridView 和 AspectRatio 控件中的一个参数 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit 阅读全文

posted @ 2023-11-20 10:15 鲤斌阅读(332) 评论(0) 推荐(0)

12、FlutterMediaQuery获取屏幕宽度和高度

摘要：final size =MediaQuery.of(context).size; class HomePage3 extends StatelessWidget { const HomePage3({super.key}); @override Widget build(BuildContext c 阅读全文

posted @ 2023-11-17 21:07 鲤斌阅读(378) 评论(0) 推荐(0)

11、层叠布局（Stack、Align、 Positioned）

摘要：Flutter Stack组件 Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局 Alignment（对齐）类是用于表示相对于父容器的对齐方式的； Alignment 类的常见用法： Alignment.topLef 阅读全文

posted @ 2023-11-17 21:06 鲤斌阅读(397) 评论(0) 推荐(0)

10、弹性布局（Flex Expanded）

摘要：自定义的IconContainer class IconContainer extends StatelessWidget { Color color; IconData icon; // IconContainer(this.icon ,{super.key,required this.color 阅读全文

posted @ 2023-11-16 19:43 鲤斌阅读(40) 评论(0) 推荐(0)

9、线性布局（Row和Column）

摘要：自定义的IconContainer void main() { runApp(MaterialApp( theme: ThemeData(primarySwatch: Colors.yellow), home: Scaffold( appBar: AppBar(title: const Text(" 阅读全文

posted @ 2023-11-16 18:53 鲤斌阅读(109) 评论(0) 推荐(0)

8、Flutter Paddiing组件

摘要：Padding组件处理容器与子元素之间的间距。 class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Containe 阅读全文

posted @ 2023-11-16 10:46 鲤斌阅读(24) 评论(0) 推荐(0)

7、Flutter GridView网格布局组件(遍历)

摘要：GridView创建网格列表主要有下面三种方式 1、可以通过GridView.count 实现网格布局一行的 Widget 数量 class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key 阅读全文

posted @ 2023-11-15 18:52 鲤斌阅读(754) 评论(0) 推荐(0)

6、Flutter 列表组件滑动

摘要：列表有以下分类： 1、垂直列表 class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Center( child: L 阅读全文

posted @ 2023-11-08 14:04 鲤斌阅读(136) 评论(0) 推荐(0)

5、图标组件

摘要：Icon(Icons.search,color: Colors.red,size: 40), 图标官网 Flutter Flutter中借助阿里巴巴图标库自定义字体图标 1. 导入字体图标文件； fonts: - family: myIcon #根据自己的需求定义 fonts: - asset 阅读全文

posted @ 2023-11-07 15:47 鲤斌阅读(40) 评论(0) 推荐(0)

随笔分类 - Flutter