如何修复下拉菜单项的对齐方式

时间:2019-07-10 09:48:30

标签: flutter

我有一个创建下拉按钮问题的功能。我的问题是,当下拉菜单项的长度不同时,它们的对齐方式似乎总是有点偏离。 (您可以尝试使用“ ss”选项,并查看它在左侧的偏移量。)我希望它们居中,但我无法弄清楚。

这是一个示例:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StackOverFlow',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'StackOverFlow'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String value;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: _buildDropDownQuestion(
              "Why is the style a little off?",
              "This one seems fine",
              value,
              ["short", "longgggggggggg", "Fairly decent", "ss"],
              (String answer) {
            setState(() {
              value = answer;
            });
          }),
        ));
  }

  Widget _buildDropDownQuestion(
    String question,
    String hintText,
    String value,
    List<String> items,
    Function onChanged,
  ) {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 10,
        ),
        Text(
          question,
          textDirection: TextDirection.rtl,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 10,
        ),
        Container(
          padding: EdgeInsets.all(3),
          alignment: Alignment.center,
          width: 250,
          decoration: BoxDecoration(
              color: Colors.grey[350],
              borderRadius: BorderRadius.all(Radius.circular(30))),
          child: DropdownButton<String>(
              icon: Container(
                width: 0,
                height: 0,
              ),
              isDense: true,
              underline: Container(
                width: 0,
                height: 0,
              ),
              style: TextStyle(color: Colors.black, fontSize: 20),
              value: value,
              onChanged: onChanged,
              items: items.map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(
                    value,
                    textAlign: TextAlign.center,
                  ),
                );
              }).toList()),
        ),
      ],
    );
  }
}

0 个答案:

没有答案