Question

我使用BackButton和TextWidget创建了一行。我想将文本居中到屏幕中间。实际上，将文本中心移动到容器宽度，但容器宽度与屏幕宽度不同，因为有后退按钮。我该如何解决这个问题？

  Expanded getTitle() {
    return new Expanded(
        child: new Text("Einloggen", style: new TextStyle(fontSize: 18.0), textAlign: TextAlign.center)
    );
  }

  BackButton getBackButton() {
    return new BackButton(

    );
  }

  Row getHeader() {
    return new Row(
      children: <Widget>[
        getBackButton(),
        getTitle()
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return new Material(
      child: new Container(
        padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: new Column(
          children: <Widget>[
            getHeader()
          ],
        ),
      ),
    );
  }

Answer 1

您可以使用Row的{{1}}参数将行的子级居中对齐。

mainAxisAlignment

类似地，Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ //children Widgets ] );参数也可以用于对齐mainAxisAligment的孩子。有关更多信息，check this out!

Answer 2

您可以使用带有Scaffold

的A AppBar来实现相同的用户界面

import csv 
import requests
from bs4 import BeautifulSoup


url = "https://www.congress.gov/members?q={%22congress%22:%22115%22}&pageSize=250&page=1"

headers = {'User-Agent': 'Mozilla/5.0'}
response = requests.get(url, headers=headers)
soup = BeautifulSoup(response.text, "html.parser")

names = soup.find_all()

items = soup.find_all("li","expanded")
for item in items:
    print(item.text)
    print(item.find("a"))
    with open('web.csv', 'a') as csv_file:
        writer = csv.writer(csv_file)
        writer.writerow([item.find("a").encode('utf-8')])

在中心制作标题：

centerTitle：true

Answer 3

根据您的代码

  Widget getTitle() {
    return const Text('Einloggen',
        style: TextStyle(fontSize: 18.0), textAlign: TextAlign.center);
  }

  BackButton getBackButton() {
    return const BackButton();
  }

  Row getHeader() {
    return  Row(
      children: <Widget>[
        Expanded(
          child: getBackButton(),
        ),
        const Spacer(),
        getTitle(),
        const Spacer(flex: 2)
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return Material(
      child: Container(
        padding: EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: Column(
          children: <Widget>[getHeader()],
        ),
      ),
    );
  }

Answer 4

我不知道它是否仍然有用，但是我由于宽域找到了一个解决方案：容器，堆栈和对齐。

Widget getTitle() {
  return new Text("Einloggen", style: new TextStyle(fontSize: 18.0));
}

Widget getBackButton() {
  return Container(
      height: MediaQuery.of(context).size.height,
      child: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: moveToLogin,
      ));
}

Widget getHeader() {
  return Container(
    height: 50.0,
    // you must set a size to the Conteiener to make sure that the internal Align 
    // widens as much as possible.
    child: new Stack(
      //  Stack places the objects in the upper left corner
      children: <Widget>[
        getBackButton(),
        Align(alignment: Alignment.center, child: getTitle()),
      ],
    ),
  );
}

final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Container(
  padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
  child: new Column(
    children: <Widget>[getHeader()],
  ),
);

这是结果

Image

如何使其他小部件在行中居中颤动

4 个答案: