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 空白消失

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

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

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

finish

finish

猜你喜欢