SearchAnchor.openView():是否更改(继承)搜索栏的宽度?

在我的 flutter_map 我有一个 IconButton 这应该会导致 SearchBar 出现 当搜索完成时

我已经通过末尾的代码实现了这一点。

但是我有一个问题:宽度 我希望它只占用其图标图像所需的空间。好吧,这会造成混乱,因为孩子的宽度

我发现的解决方法对我来说似乎并不理想:force说 Column .

Container(
  alignment: Alignment.topLeft,
  // uncomment following to show the problem:
  width: MediaQuery.sizeOf(context).width,
  child: IconButton(
    icon: const Icon(Icons.search),
    onPressed: () {
      // opens the SearchBar:
      // can I tell it to resize?
      controller.openView();
    },

  )
)

有人知道一种更优雅的方式来点击图标,让搜索栏全宽打开吗?

这是演示问题的代码。取消对前面一行的注释( THIS FIXES )您将看到搜索栏的宽度是正确的,但按钮列被推到了中心。

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(title: 'Flutter Demo', home: const MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topLeft,
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: MyMapButtonsWidget(),
      ),
    );
  }
}

class MySearchWidget extends StatefulWidget {
  const MySearchWidget({super.key});

  @override
  State<MySearchWidget> createState() => _MySearchWidgetState();
}

class _MySearchWidgetState extends State<MySearchWidget> {
  final _searchController = SearchController();

  @override
  Widget build(BuildContext context) {
    return SearchAnchor(
      dividerColor: Colors.red,
      // this refers to the history/results list dropdown
      isFullScreen: false,
      viewConstraints: BoxConstraints(
        maxHeight: MediaQuery.sizeOf(context).height * 0.75,
      ),
      viewBackgroundColor: Colors.grey.shade200,
      keyboardType: TextInputType.streetAddress,
      viewShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      searchController: _searchController,

      builder: (BuildContext context, SearchController controller) {
        // Here I click on this IconButton in order to open the SearchBar
        // but its size is inherited from the IconButton and it is not full-width!
        return Container(
          // THIS FIXES the problem, but I don' want the icon to
          // "occupy" this wide space!!!
          /*  width: MediaQuery
              .sizeOf(context)
              .width * 1.0,
              */
          child: IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              controller.openView();
            },
          ),
        );
        /*
        // This works fine
       return SearchBar(
              shape: WidgetStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
              controller: controller,
              padding: const WidgetStatePropertyAll<EdgeInsets>(
                EdgeInsets.symmetric(horizontal: 16.0),
              ),
              onTap: () {
                controller.openView();
              },
              // add as many icons at the end
              trailing: <Widget>[
                IconButton(
                  onPressed: controller.clear,
                  icon: const Icon(Icons.close),
                ),
              ],
              // add the search icon at the front
              leading: const Icon(Icons.search),
            );
            */
      },
      suggestionsBuilder:
          (BuildContext context, SearchController controller) async {
            return [Text("aaa")];
          },
    );
  }
}

class MyMapButtonsWidget extends StatefulWidget {
  const MyMapButtonsWidget({super.key});

  @override
  State<MyMapButtonsWidget> createState() => _MyMapButtonsWidgetState();
}

class _MyMapButtonsWidgetState extends State<MyMapButtonsWidget> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 35,
                padding: EdgeInsets.only(left: 5),
                child: MySearchWidget(),
              ),
              // zoom-in
              Container(
                width: 35,
                height: 35,
                padding: EdgeInsets.only(left: 5),
                child: FloatingActionButton(
                  onPressed: () {
                    print("zoomin");
                  },
                  child: Icon(
                    Icons.add_circle_outlined,
                    size: 25,
                    color: Colors.black,
                  ),
                ),
              ),
              const SizedBox(height: 8),
              // zoom-out
              Container(
                width: 35,
                height: 35,
                padding: EdgeInsets.only(left: 5),
                child: FloatingActionButton(
                  onPressed: () {
                    print("zoomout");
                  },
                  child: Icon(
                    Icons.remove_circle_outline,
                    size: 25,
                    color: Colors.black,
                  ),
                ),
              ),
              const SizedBox(height: 8),
              // pinpoint my geo-location
              Container(
                width: 35,
                height: 35,
                padding: EdgeInsets.only(left: 5),
                child: FloatingActionButton(
                  onPressed: () {
                    print("currentloc");
                  },
                  child: Icon(
                    Icons.remove_circle_outline,
                    size: 25,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}