美文网首页
Flutter小知识点

Flutter小知识点

作者: 玉思盈蝶 | 来源:发表于2020-07-03 17:45 被阅读0次

1、部分导入模块:

// 部分导入,即仅仅导入 dart:ui 库里面的 Color 模块
import 'dart:ui' show Color;
import 'package:lib1/lib1.dart' show foo, bar;
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart'
    hide NestedScrollView;

2、Flutter InkWell-水波纹效果:

InkWell(
  borderRadius: BorderRadius.circular(8.0), // 圆角
  splashColor: Colors.transparent, // 溅墨色(波纹色)
  highlightColor: Colors.transparent, // 点击时的背景色(高亮色)
  onTap: () {},// 点击事件
  child: Container(),
);

实现:包一层 Material,将背景色设置在 Material中的color里

Material(
  color: Colors.white,
  child: InkWell(),
)

参考链接: https://www.jianshu.com/p/93e32915bb9e

3、wantKeepAlive:

Tab导航栏保持子页面状态。
children需要继承自 StatefulWidget;
children的state继承自AutomaticKeepAliveClientMixin;

class MessagePage extends StatefulWidget {
  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          new Expanded(child: new TabBarWidget()),
        ],
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

class TabBarWidget extends StatefulWidget {
  @override
  _TabBarWidgetState createState() => _TabBarWidgetState();
}

class _TabBarWidgetState extends State<TabBarWidget> {
  final List<String> _tabValues = [
    '动态',
    '消息',
  ];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: _tabValues.length, //Tab页数量
      vsync: ScrollableState(), //动画效果的异步处理
    );
    _tabController.addListener(() {
      print("_tabController.index的值:" + _tabController.index.toString());
      setState(() {
        // print("_tabController.index的值:"+_tabController.index.toString());
      });
    });
  }

  //当整个页面dispose时,记得把控制器也dispose掉,释放内存
  @override
  void dispose() {
    _tabController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Color(0xffffffff),
      child: Column(
        children: <Widget>[
          Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                height: 50,
                color: Color(0xffF9F9F9),
                //  color:Colors.red,
                alignment: Alignment.center,
                child: TabBar(
                    isScrollable: true,
                    indicatorColor: Color(0xffFF3700),
                    indicator: UnderlineTabIndicator(
                        borderSide:
                            BorderSide(color: Color(0xffFF3700), width: 2),
                        insets: EdgeInsets.only(bottom: 7)),
                    labelColor: Color(0xff333333),
                    unselectedLabelColor: Color(0xff666666),
                    labelStyle:
                        TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),
                    unselectedLabelStyle: TextStyle(fontSize: 16.0),
                    indicatorSize: TabBarIndicatorSize.label,
                    controller: _tabController,
                    tabs: [
                      new Tab(
                        text: _tabValues[0],
                      ),
                      new Tab(
                        text: _tabValues[1],
                      ),
                    ]),
              ),
              new Align(
                alignment: Alignment.centerLeft,
                child: new Container(
                  margin: EdgeInsets.only(left: 15),
                  child: (_tabController.index == 1)
                      ? Text(
                          "发现群",
                          style: TextStyle(fontSize: 16, color: Colors.black),
                        )
                      : new Container(),
                ),
              ),
              new Align(
                alignment: Alignment.centerRight,
                child: new IconButton(
                  icon: new Image.asset("assets/images/message_setting.webp",
                      width: 30.0, height: 30.0),
                  onPressed: () {
                    // Routes .navigateTo(context, '${Routes.weiboPublishPage}');
                  },
                ),
              ),
            ],
          ),
          new Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                new MessageDynamicPage(),
                new MessageMsgPage()
              ],
            ),
          )
        ],
      ),
    ));
  }
}

4、使用NestedScrollViewRefreshIndicator代替RefreshIndicator,解决RefreshIndicatorNestedScrollView与冲突的问题

https://github.com/fluttercandies/extended_nested_scroll_view

5、SliverToBoxAdapter:

用作在slivers中包裹需要放在滚动列表中的元素。

const SliverToBoxAdapter({
    Key key,
    Widget child,
  }) 

PS: 持续更新~~~

相关文章

网友评论

      本文标题:Flutter小知识点

      本文链接:https://www.haomeiwen.com/subject/xdfeqktx.html