Flutter：动态更改 appBar 中的小部件大小

Question

我正在尝试执行以下操作： 我想在更改 appBar 本身的大小时动态更改操作 [...] 中的 appBar 标题和小部件的大小。 我想将标题的宽度设置为 75%，将操作中小部件（凸起的按钮）的宽度设置为 appBar 本身宽度的 30%，并且当 appBar 的大小发生更改时（例如，当我制作它时）用鼠标拉动应用程序窗口时更大或更小），我希望标题的大小（在这种情况下为宽度）和提到的小部件（凸起的按钮）相应地改变。

我尝试使用：

1. 孩子：按钮主题（ minWidth: MediaQuery.of(context).size.width, 高度：MediaQuery.of(context).size.height， ),
2. minWidth: AppBar().preferredSize.width
3. 灵活的小部件
4. 扩展的小部件
5. FractionallySizedBox。 ...等c

但我无法实现上述行为。

考虑最简单的 appBar 示例：

/// Flutter code sample for AppBar
import 'package:flutter/material.dart';

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

/// This is the main application widget.
class AlbertsApp extends StatelessWidget {
  const AlbertsApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alberts trial AppBar'),
        actions : <Widget> [
          RaisedButton (
            child: Text('Hi'),
            color: Colors.red,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a TonysChoocolonely')));
            },
          ),
          RaisedButton (
            child: Text('Bye'),
            color: Colors.green,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a KitKat')));
            },
          ),
          RaisedButton (
            child: Text('Third'),
            color: Colors.yellow,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a PeanutButter')));
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This Is The Home Page Itself',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

在任何时候，当 appBar 的大小发生变化时，我希望标题和凸起按钮的大小相应地发生变化。 例如，在任何时候，当 appBar 宽度变为“x”时，我希望标题宽度变为“x * 70 / 100”，并且每个凸起按钮的宽度变为“x * 30 / 100”。

Answer 1

我遇到了同样的问题，我所做的只是摆脱了actions 并在body: 中使用Row() 小部件。然后用Container划分小部件

  body: const Row(
    children: [
        Container(width: MediaQuery.of(context).size.width * 0.15) //Container 1
        Container(width: MediaQuery.of(context).size.width * 0.70) //Container 2
        Container(width: MediaQuery.of(context).size.width * 0.15) //Container 3
    ]
  ),

然后大小将设置为您希望将它们分成的大小。您可以将Text() 添加到Container2，并将所有按钮添加到Container1。或者，您可以设置不同的大小并使用 mainAxis 到 Row() 小部件。

但只要确保你有三个容器或添加 sizedbox 以使第一个容器均匀，以便使第二个容器位于中心中心！