flutter 为什么文本flexibleSpace小部件位于标题appbar上方

hivapdat  于 2023-03-31  发布在  Flutter
关注(0)|答案(2)|浏览(93)

我是一个新的flutter.我想一个长标题出现在应用程序栏,我想把它放在flexibleSpace.所以,我扩大了应用程序栏,但我不明白为什么它出现在最顶部?

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(200),
          child: AppBar(
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.view_carousel)),
                  Tab(icon: Icon(Icons.grid_view))
                ],
              ),
              flexibleSpace: const Text('SubTitle very long..........................'),
              title: const Text('Title',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ))),
        ),
        body: const TabBarView(
          children: [AttendanceCarousel(), AttendanceGrid()],
        ),
      ),
    );
  }

我跟踪了Flutter文档但看起来像那样?

cl25kdpy

cl25kdpy1#

必须将Text Widget与Align Widget对齐,并根据需要设置其align属性。
样本代码:-

flexibleSpace: const Align( // <-- Use Align Widget
    alignment: Alignment.center,
    child:
        Text('SubTitle very long..........................')
),

验证码:

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class CustomCard extends StatelessWidget {
  const CustomCard(this.label, {Key? key}) : super(key: key);
  final String label;
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        color: Colors.grey[100],
        width: 128,
        height: 128,
        child: Center(
          child: Text(
            label,
            style: const TextStyle(fontSize: 16),
          ),
        ),
      ),
    );
  }
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: const Size.fromHeight(200),
            child: AppBar(
                bottom: const TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.view_carousel)),
                    Tab(icon: Icon(Icons.grid_view))
                  ],
                ),
                flexibleSpace: const Align( // <-- Use Align Widget
                    alignment: Alignment.center,
                    child:
                        Text('SubTitle very long..........................')),
                title: const Text('Title',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ))),
          ),
          body: const TabBarView(
            children: [
              Center(child: Text('1st Page')),
              Center(child: Text('2nd Page'))
            ],
          ),
        ),
      ),
    );
  }
}

输出:-

lzfw57am

lzfw57am2#

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: AppBar(
              title: Column(
                children: const [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text('SubTitle very long..........................', style: TextStyle(
                      color: Colors.black54,
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                    ),),
                  ),
                  SizedBox(height: 20,),
                  Text(
                    'Title',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.view_carousel)),
                  Tab(icon: Icon(Icons.grid_view)),
                ],
              ),
            ),
            body: TabBarView(
             children: [
               AttendanceCarousel(),
               AttendanceGrid(),
             ],
                ),
          ),
        );
  }

快乐编码...

相关问题