代码之家 › 专栏 › 技术社区 › Kavin-K

如何自定义应用程序栏并在颤振中放置图像视图

flutter-layout flutter

Kavin-K · 技术社区 · 7 年前

我想按照给定的图像设计布局,

我用了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: [
              .
              .
              ],
            ),
          ),
        ),

输出不同于预期的设计检查,

我怎么修这个?

1 回复 | 直到 7 年前

anmol.majhail 7 年前

这是您想要的布局代码。

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)
              ],
            ),
          ),
        ),
      ),
    );
  }
}