在FlutterAppBar的自定義搜索欄中設定影片

我已經實作了一個自定義搜索欄，可以在用戶選擇它時進行切換。我正在替換我需要的 appBar 中的 SearchBar。最初，搜索欄將顯示一個帶有 String("Search")==> view1 的 Icon(search)，當單擊其中任何一個時，它將被另一個具有可搜索文本欄位 ==> 視圖 2 的視圖替換。將發布我到目前為止所做的事情。我需要給它一個漂亮的影片。影片應該像這樣移動。最初 view1 顯示然后 ==> 影片 view2 從右到左替換 view1 當需要再次回傳 view1 然后 ==> 反轉上述影片。

到目前為止的解決方法

class SearchBar extends StatefulWidget with PreferredSizeWidget {
  const SearchBar({Key? key}) : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class _SearchBarState extends State<SearchBar> {
  bool _toggle = true;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      elevation: 0.0,
      backgroundColor: CustomColors.mWhite,
      automaticallyImplyLeading: false,
      title:
          AnimatedContainer(
        width: MediaQuery.of(context).size.width * 0.8,
        decoration: _toggle
            ? null
            : BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                  width: 1,
                  color: CustomColors.grey600,
                ),
              ),
        duration: Duration(seconds: 2),
        child: _toggle
            ? GestureDetector(
                onTap: () {
                  setState(() {
                    _toggle = !_toggle;
                  });
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.search,
                      size: 24.0,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      "Search",
                      style: tBody1,
                    ),
                  ],
                ),
              )
            : Center(
                child: TextField(
                  textInputAction: TextInputAction.search,
                  decoration: InputDecoration(
                      prefixIcon: IconButton(
                        icon: Icon(Icons.arrow_back_ios),
                        onPressed: () {
                          setState(() {
                            _toggle = !_toggle;
                          });
                        },
                      ),
                      border: InputBorder.none),
                ),
              ),
      ),
      actions: [
        Container(
          width: 50.0,
          height: 50.0,
          padding: EdgeInsets.only(right: 8.0),
          child: Image.asset(
            'assets/images/settings.png',
          ),
        ),
      ],
    );
  }
}

uj5u.com熱心網友回復：

AnimatedContainer應該有一個width取決于值的_toggle值，在你的情況下，只有搜索欄位應該包含在AnimatedContainer.

我稍微簡化了你的代碼來展示如何讓影片作業，見下文。該transform引數負責從右到左的影片，如果你注釋它，它會從左到右影片。

我還添加了一個AnimatedOpacity淡入/淡出后退圖示。

（您可以將代碼原樣粘貼到 DartPad 中以查看其作業原理。）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(appBar: SearchBar()));
  }
}

class SearchBar extends StatefulWidget with PreferredSizeWidget {
  const SearchBar({Key? key}) : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

class _SearchBarState extends State<SearchBar> {
  bool _toggle = true;

  void _doToggle() => setState(() => _toggle = !_toggle);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Stack(children: [
        GestureDetector(
          onTap: _doToggle,
          child: SizedBox(
              height: kToolbarHeight * 0.8,
              child: Row(
                children: const [
                  Icon(
                    Icons.search,
                    size: 24.0,
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  Text("Search"),
                ],
              )),
        ),
        AnimatedContainer(
          width: _toggle ? 0 : MediaQuery.of(context).size.width,
          transform: Matrix4.translationValues(_toggle ? MediaQuery.of(context).size.width : 0, 0, 0),
          duration: const Duration(seconds: 1),
          height: kToolbarHeight * 0.8,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
              width: 1,
              color: Colors.grey[600]!,
            ),
          ),
          child: TextField(
            textInputAction: TextInputAction.search,
            decoration: InputDecoration(
                prefixIcon: AnimatedOpacity(
                    duration: const Duration(seconds: 1),
                    opacity: _toggle ? 0 : 1,
                    child: IconButton(
                      icon: const Icon(Icons.arrow_back_ios),
                      onPressed: _doToggle,
                    )),
                border: InputBorder.none),
          ),
        )
      ]),
    );
  }
}

標籤：

上一篇：蜂巢顫動中的洗掉（鍵）功能不起作用

下一篇：是否可以只使用一個TextFormField作為電子郵件和密碼？