标签: flutter-layout

我试图在颤振中包装一些内容但没有成功。我发现我不能像使用 Chips 或 Text 小部件那样包装行。有谁知道为什么？

这是三组 Rows ，每组都有一个 Icon 和一个 Text ，并排放置。但是在较小的屏幕中它会溢出，因为没有足够的空间（宽度）。

我希望当当前行中的空格结束时，最后一组行（一个图标和一个标签）跳到下一行。

谢谢

我试图用容器包装行，但没有奏效。

    Row(
    children: <Widget>[
        Wrap(
        children: <Widget>[
            Row(
            children: <Widget>[
                Text('long text 1'),
                Text('an icon here'),
            ],
            ),
            Row(
            children: <Widget>[
                Text('Anoter Label'),
                Text('Anoter icon'),
            ],
            ),
        // I want this row to jump to next line when there is not space in 
        // current line 
        Row(
            children: <Widget>[
                Text('More Text'),
                Text('Moire icon'),
            ],
            ),
        ],
        )
    ],
    ),

Flutter 布局 ok 大屏

在小屏幕上溢出

当我在较小的屏幕上时，带有标题的图像会调整大小并适合。但是图像上方的标签和图标溢出了。所以我喜欢最后一组图标/标签与 $ …

我正在我的应用程序中添加抽屉，并遵循官方指南。我想将 Drawer 分为三个部分：

1. 抽屉头（顶部）

2. 部分项目

3. 设置（底部）

如果我ListView是其直接子代，Drawer则它可以正常工作，但我无法在底部添加“设置”部分。我发现了这个，它符合我的要求，但DrawerHeader不占用最大宽度。

这是我的代码：

      Drawer(
            elevation: 1.5,
            child: Column(children: <Widget>[
              DrawerHeader(
                  decoration: BoxDecoration(
                color: Colors.redAccent,
              )),
              Expanded(
                  child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  //list tiles
                ],
              )),
              Container(
                color: Colors.black,
                width: double.infinity,
                height: 0.1,
              ),
              Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
            ])),

默认情况下，抽屉标题宽度不是最大的。它根据内容大小进行调整，如果我增加字体大小或在左侧和右侧添加填充，则需要更多的宽度。

检查下图以供参考：

我试图使用 ListTile 在左侧显示一个小标题，然后在尾随小部件中显示一个较长的文本。如果没有足够的水平空间，我的想法是让尾随文本分成多行。

我还尝试使用以下代码创建自己的磁贴：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12),
        child: Text(
          "Campus",
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      Text(
        "20h course - New students -",
        style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w400,
        ),
      ),
    ],
  ),
),

在 Pixel 2 XL 模拟器中使用此代码，因为有足够的空间，所有内容都按预期在同一行中：

但是当我在 Nexus One 模拟器中尝试它时，由于它的大小，这里是输出：

为了允许文本分成多行，我将右侧的文本包装到一个灵活的小部件中：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12), …

我无法解析这样的 json

[{"operation_id":"38911","external_id":null,"status":"SUCCESS","date":"2019-12-01T12:30:08.000Z","amount":200}]

问题在于具有动态名称的数组。这是我的 POJO：

class PaymentHistoryResponse {
final List<History> list;

PaymentHistoryResponse({this.list});
}

class History {
final String operationId;
final dynamic externalId;
final String status;
final DateTime date;
final int amount;

History({
@required this.operationId,
@required this.externalId,
@required this.status,
@required this.date,
@required this.amount
});

factory History.fromJson(String str) => History.fromMap(json.decode(str));

String toJson() => json.encode(toMap());

factory History.fromMap(Map<String, dynamic> json) => History(
operationId: json["operation_id"],
externalId: json["external_id"],
status: json["status"],
date: DateTime.parse(json["date"]),
amount: json["amount"]
);

Map<String, dynamic> toMap() => {
"operation_id": operationId,
"external_id": externalId,
"status": status, …

如果我有设置宽度/高度手势检测器的空容器不起作用，但如果我添加类似颜色的东西，它就会开始工作。

测试应用：

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  click(){
    _counter++;
    print('Clicked times: $_counter');
  }

  @override
  Widget build(BuildContext context) …

我是 Flutter 的新手，我想知道如何在 Flutter 中更改背景图像的位置。我想在页面的一角显示背景图像，并由于 ovelflow 将其位置更改为图像的隐藏部分。

作为实现这一目标的前端开发人员，我考虑将图像的位置更改为绝对值并将底部和右侧设置为负值，但在 Flutter 中以不同的方式执行这些操作。

我如何在 Flutter 中实现这一点？

class _WaterIntakeState extends State<WaterIntake> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: <Widget>[
          Container(
            color: Colors.white,
          ),
          Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.dstATop),
                  image: AssetImage("assets/images/drink-water.png"),
                  fit: BoxFit.fitWidth,
            )),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              title: Text('Water Intake'),
            ),
            body: Container(
//              child: const ButtonsWidget(),
            ),
          ),
        ],
      ),
    );
  }
}

当前状态 ：

我想要的是 ：

我不知道这是否是正常的颤动行为，但是只有当您点击键盘“确定”按钮失去焦点时才会失去焦点，这很烦人。如果不这样做，光标将在文本字段中保持活动状态。

避免这种情况的最佳做法是什么？（在 gif 中它不是很受欢迎，但失去焦点的唯一方法是点击键盘上的“确定”按钮，否则无论您是否点击屏幕的其他区域，光标都将始终处于活动状态）

    Widget _searchBar() {
     return Container(
      child: TextField(
        textAlignVertical: TextAlignVertical.center,
        style: TextStyle(
          textBaseline: TextBaseline.alphabetic,
          color: _styles["gris_oscuro1"]["color"],
        ),
        onChanged: (value) {},
        decoration: InputDecoration(
          filled: true,
          fillColor: _styles["gris_claro"]["color"],
          alignLabelWithHint: true,
          hintText: "Buscar por código",
          hintStyle: TextStyle(color: _styles["gris_oscuro2"]["color"]),
          prefixIcon:
              Icon(Icons.search, color: _styles["gris_oscuro2"]["color"]),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(40)),
            borderSide:
                BorderSide(color: _styles["gris_claro"]["color"], width: 1.0),
          ),
        ),
      ),
    );
    );


    Scaffold(
        key: _scaffoldKey,
        backgroundColor: _styles["fondo"]["bg"],
        drawer: MenuWidget(),
        body: SafeArea(
        child: _searchBar(),
        )

我想删除 BottomNavigationBar 顶部的行，以便图标看起来是主屏幕的一部分。

但是我找不到任何方法来删除底部导航栏的边框。

  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    backgroundColor: Colors.cyan[50],
    selectedItemColor: Colors.cyan[900],
    unselectedItemColor: Colors.grey[700],
    type: BottomNavigationBarType.fixed,
    items: [
      ..._tabItems.map((item) =>
          BottomNavigationBarItem(icon: item.icon, title: Text(item.title)))
    ],
  ),

我怎样才能删除这条线？

更新 Flutter Environment 后，我​​遇到了这个问题。请帮我解决这个问题。

 @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
          appBar: topBar(), 
          body: TabBarView( // problem indicates here
            children: _kTabPages,
            controller: _tabController,
          ),

          // Button Navigation
          bottomNavigationBar: Material(
            color: Colors.redAccent,
            child: TabBar(
              tabs: _kTabs,
              controller: _tabController,
            ),
          )),
    );
  }

请尽快帮助我。

我想在颤振中显示一个列表，我正在使用 listView. 问题是我只想显示 5 个项目，我的意思是当用户向下滚动时，我想从开始索引中删除并将另一个小部件添加到包含我的小部件的列表的末尾，但是当我这样做时ScrollView 而不是停留在它所在的位置（例如显示索引 3 中的项目），而是转到下一个项目（它跳转到项目 4 所在的位置）。

我的数据有点贵，我不能保留它们，我必须从一开始就删除它们。我真的被困住了，我真的很感激一些帮助