web-dev-qa-db-ja.com

テキストフィールドフラッタのテキストを垂直方向に整列させる

私はたくさんのリソースで見つけようとしましたが、残念ながら私はテキストフィールド内のテキストを垂直に揃える方法を見つけることができませんでした。私はまた接尾辞の代わりにふさふそを使ってみましたが、まだ運もしませんでした。これが私のコードです：

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        backgroundColor: Colors.white,
        title: Container(
          margin: EdgeInsets.only(bottom: 10),
          child: Image.asset(
            "icons/logo.png",
          ),
        ),
        bottom: PreferredSize(
          child: Padding(
            padding: EdgeInsets.only(
              left: 10,
              right: 10,
              bottom: 10,
            ),
            child: Container(
              height: 40,
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
            ),
          ),
          preferredSize: Size(MediaQuery.of(context).size.width, 50),
        ),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 11),
        child: Column(
          children: <Widget>[
            Carousel(),
          ],
        ),
      ),
    );
  }
}

class Carousel extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CarouselState();
  }
}

class _CarouselState extends State<Carousel> {
  List<String> urls = [];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Stack(
        children: <Widget>[
          Image.network(
              "someImageUrlHere."),
          Positioned(
            bottom: 5,
            width: MediaQuery.of(context).size.width - 20,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
 _

この問題を引き起こしている問題は何ですか？そしてどのように私はこの問題を解決することができますか？

textfluttertextfieldvertical-alignment
8
TheNoobDeveloper0299

列で折り返して「mainaxisaLignment.Center」を指定して 'mainaxisaLignment'プロパティを追加してください。

    Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start, // If you want align text to left
          children: <Widget>[
            TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
          ],
        ),
      )
 _
2
KuKu

日付時間は完璧にピッキングされていますが、ヒントアライメントと日付の値は同じ場所では整列しません。

 Container(
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, top: 15.0, bottom: 10.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Center(
                          child: Image.asset(
                            "assets/images/date.png",
                            // width: 20,
                            width: SizeConfig.safeBlockHorizontal * 4,
                          ),
                        ),
                        SizedBox(
                          width: 15,
                        ),
                        Flexible(
                          child: Center(
                            child: DateTimeField(
                              decoration: InputDecoration.collapsed(
                                hintText: "Start date and time",
                                hintStyle: TextStyle(
                                  // fontSize: 14,
                                  fontSize: SizeConfig.safeBlockHorizontal * 3,
                                ),
                                border: InputBorder.none,
                              ),
                              validator: validateStartDate,
                              onSaved: (DateTime val) {
                                _startDate = val;
                              },
                              format: format,
                              style: TextStyle(
                                fontSize: SizeConfig.safeBlockHorizontal * 3,
                              ),
                              onShowPicker: (context, currentValue) async {
                                // FocusScope.of(context).previousFocus();
                                final Startdate = await showDatePicker(
                                    context: context,
                                    firstDate: DateTime.now()
                                        .subtract(Duration(days: 1)),
                                    initialDate: currentValue ??    DateTime.now(),
                                    lastDate: DateTime(2100));
                                if (Startdate != null) {
                                  final StartTime = await showTimePicker(
                                    context: context,
                                    initialTime: TimeOfDay.fromDateTime(
                                        currentValue ?? DateTime.now()),
                                  );
                                  setState(() {
                                    StartDate = DateTimeField.combine(
                                        Startdate, StartTime);
                                  });
                                  return DateTimeField.combine(
                                      Startdate, StartTime);
                                } else {
                                  return currentValue;
                                }
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ), _

`] 1

0
Mohankumar Shan
TextField(
   textAlign: TextAlign.center,
   decoration: InputDecoration(
     hintText: "Centered Hint",
   ),
)
 _

これが役立つように願っています。

0
Aashar Wahla