Flutter入门一

1.Container

1. Container设置圆角
Container(
        width: widget.width,
        height: widget.height,
        decoration: BoxDecoration(
          color: widget.backgroundColor,
          border: Border.all(
            color: widget.borderColor ??  widget.backgroundColor,
            width: widget.borderWidth,
          ), borderRadius: BorderRadius.all(Radius.circular(4.0))
        ),
        child: _getChild(),
      ),
ClipOval(
   child:Image.network(url,width:100,height:100,fit:BoxFit.cover)
)
2. 给 Container 某一角设置圆角
Container(
   decoration: BoxDecoration(
     borderRadius: BorderRadius.only(
       topLeft: Radius.circular(30),
       bottomRight: Radius.circular(30),
     ),
  ),
),

2. CustomScrollView组件_Sliver组件

普通ListView无法嵌套ListView. 那么我们引入了CustomScrollView。
CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的,即它们看起来是一个整体。如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的,所以这时就需要一个"胶水",把这些彼此独立的可滚动组件"粘"起来,而CustomScrollView的功能就相当于“胶水”。

Sliver有细片、薄片之意,在Flutter中,Sliver通常指可滚动组件子元素(就像一个个薄片一样)。但是在CustomScrollView中,需要粘起来的可滚动组件就是CustomScrollView的Sliver了,如果直接将ListView、GridView作为CustomScrollView是不行的,因为它们本身是可滚动组件而并不是Sliver!因此,为了能让可滚动组件能和CustomScrollView配合使用,Flutter提供了一些可滚动组件的Sliver版,如SliverList、SliverGrid等。实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型(自身不能再滚动),而后者包含滚动模型 ,也正因如此,CustomScrollView才可以将多个Sliver"粘"在一起,这些Sliver共用CustomScrollView的Scrollable,所以最终才实现了统一的滑动效果。

Sliver名称 功能 对应组件
SliverList 列表 ListView
SliverFixedExtentList 项目高度固定列表 ListView 指定itemExtent
SliverPrototypeExtentList 根据原型生成高度固定的列表 ListView 指定prototypeItem
SliverAnimatedList 添加/删除列表项时执行动画 AnimatedList

https://www.jianshu.com/p/d833103ac4e7

3. column中嵌套GridView 报一下错误

完整报错信息:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

解决办法:

Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (needGradeTag)
                    Padding(
                      padding: EdgeInsets.fromLTRB(15, 15, 0, 0),
                      child: Text(
                        "您的年级",
                        style: TextStyle(
                          color: Color(0xFF19191B),
                          fontSize: 17,
                        ),
                      ),
                    ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(15, 15, 0, 0),
                    child: UnderlineText(
                      content: groupData.gradeTypeName,
                      textColor: Color(0xFF19191B),
                      textSize: 15,
                    ),
                  ),
                  GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3, //横轴三个子widget
                        childAspectRatio: screenWidth / 3.0 / 38.0,
                        mainAxisSpacing: 4, crossAxisSpacing: 4
                    ),
                    itemBuilder: (context, index) {
                      List<GradeVos> GradeList = groupData.gradeVos;
                      GradeVos gradeVos = GradeList[index];
                      return  Container(
                        color: Colors.red,
                        child: Text("哈哈"),
                      );
                    },
                    itemCount: groupData.gradeVos.length,
                  ),

                ],
              ),

column中添加 mainAxisSize: MainAxisSize.min,

4. 页面保存状态方法

class _SchoolState extends State<School> with AutomaticKeepAliveClientMixin 

然后重写

@override
  bool get wantKeepAlive => true;

5. 设置图片

1.image fit字段设置
Image.network("https://img.com",fit:BoxFit.fill)
BoxFit.fill:充满控件
BoxFit.cover:剪裁充满空间
BoxFit.fitWidth:宽度填充
BoxFit.fitHeight:高度填充
2. 平铺

repeat: ImageRepeat.repeatX x平铺
repeat: ImageRepeat.repeatY y平铺
repeat: ImageRepeat.repeat xy都平铺

6. card

shep: RounedRectangleBorder(
borderRadius:borderRadius.circle(10);
)

7. CirclrAvatar

CircleAvatar(
)

8. 按钮

ElevatedButton
各种按钮.png

9. Wrap

wrap

10. BottomNavgationBar

BottomNavgationBar

11. TabBar

TabBar

12. flutter设置状态栏颜色

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

///状态栏颜色
class StatusBarDemoPage extends StatefulWidget {
  const StatusBarDemoPage({super.key});

  @override
  _StatusBarDemoPageState createState() => _StatusBarDemoPageState();
}

class _StatusBarDemoPageState extends State<StatusBarDemoPage> {
  bool customSystemUIOverlayStyle = false;

  @override
  Widget build(BuildContext context) {
    var body = getBody();
    ///如果手动设置过状态栏,就不可以用 AnnotatedRegion ,会影响
    if (customSystemUIOverlayStyle) {
      return body;
    }
    ///如果没有手动设置过状态栏,就可以用 AnnotatedRegion 直接嵌套显示
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: body,
    );
  }

  getBody() {
    return Scaffold(
      appBar: const ImageAppBar(),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                ///手动修改
                setState(() {
                  customSystemUIOverlayStyle = true;
                });
                SystemChrome.setSystemUIOverlayStyle(
                    SystemUiOverlayStyle.light);
              },
              style: ButtonStyle(
                backgroundColor: ButtonStyleButton.allOrNull<Color>(
                  Colors.yellowAccent,
                ),
              ),
              child: const Text("Light"),
            ),
            const SizedBox(
              width: 10,
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  customSystemUIOverlayStyle = true;
                });
                SystemChrome.setSystemUIOverlayStyle(
                    SystemUiOverlayStyle.dark);
              },
              style: ButtonStyle(
                backgroundColor: ButtonStyleButton.allOrNull<Color>(
                  Colors.greenAccent,
                ),
              ),
              child: const Text("Dart"),
            ),
          ],
        ),
      ),
    );
  }
}

///自定义 PreferredSizeWidget 做 AppBar
class ImageAppBar extends StatelessWidget implements PreferredSizeWidget {
  const ImageAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset(
          "static/gsy_cat.png",
          fit: BoxFit.cover,
          width: MediaQuery.sizeOf(context).width,
          height: kToolbarHeight * 3,
        ),
        SafeArea(
          child: IconButton(
              color: Colors.white,
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.of(context).pop();
              }),
        )
      ],
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight * 3);
}

13. MediaQuery.viewInsetsOf(context).bottom 是用来获取当前应用的底部视图的内边距

viewInsets : 被系统用户界面完全遮挡的部分大小,简单来说就是键盘高度

14. 返回到根目录

Get.until((route) => route.settings.name == '/');

flutter 实现ios presnet效果

Get.to( widget, transition: Transition.downToUp);

15. 渐变色

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [
                  Colors.red,
                  Colors.blue,
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

16. NestedScrollView 的 headerSliverBuilder

headerSliverBuilder 中返回的数组中的widget只要是SliverToBoxAdapter包裹的就行

17. ListView去掉安全留白的方法

方法一:

ListView.builder(
      padding: EdgeInsets.zero,
      itemCount: 20,)

方法二:

MediaQuery.removePadding(context:context, removeTop: true,removeBottom: true, chail:)

18. 让某个widget在安全区域内

 SafeArea(
              child: Container(
            height: 44,
            color: Colors.blue,
          ))

19. 关于ExpansionTile

可通过shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0)),将展开边沿的黑线去掉

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352

推荐阅读更多精彩内容