我怎么能在顫動中做到這一點？

所以在我的任務中，我必須讓這個螢屏顫抖起來，到目前為止我已經這樣做了，但我們還沒有學到很多東西，他們說搜索答案，我找不到所有東西

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(color: Color.fromRGBO(0, 0, 0, 1.0)),
      ),
      home: const MyHomePage(title: 'Person'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => 0,
        ),
        title: Text(widget.title),
      ),
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(image: AssetImage('images/background.png'))),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                '',
              ),
              Text(
                '',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color.fromRGBO(0, 0, 0, 1.0),
        onPressed: () => 0,
        tooltip: 'Record',
        child: const Icon(Icons.mic),
      ),
    );
  }
}

我確實嘗試過這樣做，但我不知道如何在應用欄以及文本和文本欄位中添加圖示，所以如果有人能提供幫助，那就太棒了

uj5u.com熱心網友回復：

快速回答您的問題！在 AppBar 中使用 ListTile 作為標題屬性中的 Widget，并在 ListTile 中添加前導和標題。要實作動作按鈕，需要在appbar中使用action屬性，然后可以添加IconButton。

也看看小部件目錄

uj5u.com熱心網友回復：

您可以使用 Row ontitle和actionsfor right 按鈕。

return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => 0,
    ),
    title: Row(
      children: [
        CircleAvatar(),
        Text(widget.title),
      ],
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.more_vert),
      ),
    ],
  ),

查找更多關于AppBar

uj5u.com熱心網友回復：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Chat App',
      theme: ThemeData(
          appBarTheme: const AppBarTheme(
        color: Color.fromRGBO(0, 0, 0, 1),
      )),
      home: const MyHomePage(title: 'Chat App'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required String title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => 0,
          ),
          title: Row(
            children: const [
              CircleAvatar(backgroundImage: AssetImage('images/person.jpg')),
              Text(' Person'),
            ],
          ),
          actions: [
            const Icon(Icons.video_call),
            const Icon(Icons.phone),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.more_vert),
            ),
          ],
        ),
        body: Stack(
          children: [
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(32),
              decoration: const BoxDecoration(
                image:
                    DecorationImage(image: AssetImage('images/background.png')),
              ),
            ),
            Container(
              alignment: AlignmentDirectional.topStart,
              margin: const EdgeInsets.only(left: 30, top: 20),
              child: const CircleAvatar(
                radius: 35,
                backgroundImage: AssetImage('images/person1.jpg'),
              ),
            ),
            Container(
              alignment: AlignmentDirectional.topEnd,
              margin: const EdgeInsets.only(top: 100, right: 30),
              child: const CircleAvatar(
                radius: 35,
                backgroundImage: AssetImage('images/person2.jpg'),
              ),
            ),
            Container(
              alignment: AlignmentDirectional.bottomCenter,
              child: const TextField(
                decoration: InputDecoration(
                  alignLabelWithHint: true,
                  border: OutlineInputBorder(),
                  fillColor: Color.fromRGBO(255, 255, 255, 1),
                  hintText: 'Type a Massage',
                ),
              ),
            ),
          ],
        ));
  }
}

那么現在我可以在哪里添加浮動操作按鈕？

標籤：扑镖颤振布局

上一篇：撲動自定義形狀的應用欄

下一篇：在VSCode中更改Dart/Flutter格式