flutter - 无法在 AppBar Flutter 中放置图像和文本

Question

我想将图像和文本放入 appbar，但似乎我无法将我想要的所有内容放入 appbar。

我有这个代码：

    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title:Column(
                children: [
                  Container(
                    child: Image.asset(
                    'assets/vecteezy_circle-abstract_1191814.png',
                    fit: BoxFit.scaleDown,
                    height: 100,
                  ),
                  ),
                  Container(
                      padding: const EdgeInsets.only(top: 15),
                      child: Text('Text'))
                ],
              ),
            bottom: TabBar(
              tabs: [Tab(text: 'tab 1'), Tab(text: 'tab 2')],
            ),
          ),

          body: TabBarView(children: [
            Text("o"),
            Text("kk"),
          ]),
        ));
  } 

我有这样的结果： https ://i.stack.imgur.com/jzt4o.png

我怎样才能合适？所以它看起来像这样： https ://i.stack.imgur.com/r0gum.png

标签： fluttermobileflutter-appbar

Answer 1

你需要CustomScrollView使用SliverAppBar

从Flutter Dev看这个例子

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: <Widget>[
            // Add the app bar to the CustomScrollView.
            SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}