如何自定义 appbar 并将 Imageview 放置在 Flutter 中答案

【问题标题】：How to customize appbar and place an Imageview in flutter如何自定义 appbar 并将 Imageview 放置在 Flutter 中
【发布时间】：2018-12-17 07:32:12
【问题描述】：

我想按照给定的图像设计一个布局，

我使用了 PreferredSize，我的代码是，

PreferredSize(
          preferredSize: Size.fromHeight(200.0),
          child: AppBar(
            // title: Text('Profile'),
            title: Row(
              children: <Widget>[
                Icon(Icons.account_circle, size: 150.0),
                Text('data'),
              ],
            ),
            bottom: TabBar(
              tabs: [
              .
              .
              ],
            ),
          ),
        ),

输出与预期设计不同，检查一下，

我该如何解决这个问题？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

这是您想要的布局的代码。

class MyHomePage1 extends StatefulWidget {
  @override
  _MyHomePage1State createState() => _MyHomePage1State();
}

class _MyHomePage1State extends State<MyHomePage1> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: 0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.account_circle,
                    size: 70.0,
                    color: Colors.white,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Account Name',
                        style: TextStyle(color: Colors.white),
                      ),
                      Text(
                        'Email Address',
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          bottom: PreferredSize(
            preferredSize: Size.square(140.0),
            child: TabBar(
              tabs: [
                Icon(Icons.train),
                Icon(Icons.directions_bus),
                Icon(Icons.motorcycle)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：