flutter third day

Today to implement custom top navigation bar and then set the background to start refueling 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;
  }

This is all the code thank days thanks thanks thanks micro-channel group degree of your mother finally get

Is not a disadvantage comments I wait to add comments add a comment finish after two minutes

And so a bit wrong ah forget the menu bar to engage in a transparent

Oh ~ ~ ~ ~ continue it

finish

Add inside build method

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

But the problem again if I want to change the status bar to another page for other colors do
this problem temporarily give up .....

News list implementation of the following three formats requires writing one is with and one without a picture is a picture of two to three pictures of the
start ~~~~~

has a problem

image.png

Among these blank Editor's Note children?

Resolved before then and write up a solution

preferredSize is the height of AppBar beginning to 150 now set to disappear blank 85

Inter suddenly thought screen adaptation of the problem and then go online to search of the investigation

Interested junior partner Click here to view

Previous --------------------------------------------- next piece