flutter 第三天

今天先实现自定义顶部导航栏 然后设置背景 开始 加油ing

finish

image.png

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabBar();
}

class _TabBar extends State<HomePage> {
//这里是tabbar的标题
  final List<String> _tabValues = [
    '标题1',
    '通知公告',
    '标题2',
    '标题3',
    '通知公告1',
    '通知公告2',
  ];
  TabController _controller;
  @override
  void initState() {
    super.initState();
    _controller = TabController(
      length: _tabValues.length,
      vsync: ScrollableState(),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new PreferredSize(child://因为appbar里面没有直接设置背景图片的属性  所以只能自定义
      new Column
        children: <Widget>[
          new Container(
            padding: new EdgeInsets.only(
                top: MediaQuery.of(context).padding.top
            ),
            child: new Padding(padding: const EdgeInsets.only(left: 16,top: 6,right: 10,bottom: 6),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Row(//这里是简单的一个row  第一个是图片  第二个是 text  这个很容易看出来的
                      children: <Widget>[
                        new Container(
                          margin: const EdgeInsets.only(right: 8),
                          child: new Image.asset("images/me.png",width: 35,height: 26,),
                        ),
                        new Text(
                          '我的APP',
                          style: new TextStyle(
                              fontSize: 18.0,
                              fontWeight: FontWeight.w500,
                              color: value.themeColor
                          ),
                        )
                      ],
                    ),
                    SearchView(),//这个是后面的搜索框   也是稍微布局了下
                  ],
                )
            ),
            decoration: new BoxDecoration(
                image: new DecorationImage(image:  new AssetImage("images/homepage_navigationbar.png"),fit: BoxFit.cover)
            ),
          ),
          new TabBar(//这个地方我本来是吧tabbar和tabbarview 都放在了body里面  发现有错误   这个现在的理解是body里面只能放一个容器 (可能有错误  有大神提出来的话我马上修改)   所以把自定义的导航栏 修改成了一个Column  然后把tabbar放在了最下面
            tabs: _tabValues.map((f) {
              return Text(f);
            }).toList(),
            controller: _controller,
            indicatorColor: Colors.red,
            indicatorSize: TabBarIndicatorSize.tab,
            isScrollable: true,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.black,
            indicatorWeight: 5.0,
            labelStyle: TextStyle(height: 2),
          ),
        ],
      ),
        preferredSize: new Size(
            MediaQuery.of(context).size.width,
            150.0
        ),
      ),
      body: new TabBarView(
        controller: _controller,
        children: _tabValues.map((f) {
          return Center(
            child: Text(f),
          );
        }).toList(),
      ),
    );
  }
}

class SearchView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return search();
  }
  Widget search(){
    Widget r = new Container(
      height: 26,
      width: 200,
      padding: const EdgeInsets.only(left: 40,right: 50),
      decoration: new BoxDecoration(
          color: value.themeColor_a30,
          borderRadius: new BorderRadius.all(const Radius.circular(13.0))
      ),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            padding: const EdgeInsets.only(right: 8),
            child: new Image.asset("images/me_to.png",width: 15,height: 15,),
          ),
          new Text("搜索内容",
            style: new TextStyle(
                fontSize: 14.0,
                color: value.themeColor
            ),)
        ],
      ),
    );
    return r;
  }

这是全部代码 感谢天 感谢地 感谢微信群 感谢度娘 终于搞定了

是不是缺点注释 稍等 我去添加注释 两分钟之后 注释添加完毕

等等 有点不对啊忘记了把菜单栏搞透明了

唉 ~~~~ 继续吧

finish

在build方法里面添加

    // TODO: implement build
    if (Platform.isAndroid) {
      // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。
      SystemUiOverlayStyle systemUiOverlayStyle =
      SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }

但是问题又来了 如果我想修改其他页面的状态栏为其他颜色呢
这个问题暂时放弃.....

下面实现 新闻的列表 要求 三种格式 一种是带文字不带图片的 一种是一张图片的 一种是两到三张图片的
开始~~~~~

有问题

image.png

中间这些空白的是咋回事儿?

先解决着 又解决方法了写上来

preferredSize 是指AppBar的高度 刚开始设置为150 现在设置为85 空白消失

忽然间想到了屏幕适配的问题 然后去网上查了查

有兴趣的小伙伴点击 这里 查看

上一篇 ---------------------------------------------下一篇